figurine-creator.js

import { useState } from "react";
import pieces from "./data";
import "./App.css";

function App() {
  const [expressionIndex, setExpressionIndex] = useState(2);
  const [hairIndex, setHairIndex] = useState(2);
  const [outfitIndex, setOutfitIndex] = useState(3);

  const randomize = () => {
    setExpressionIndex(Math.floor(Math.random() * pieces.expression.length));
    setHairIndex(Math.floor(Math.random() * pieces.hair.length));
    setOutfitIndex(Math.floor(Math.random() * pieces.outfit.length));
  };

  const setCategoryIndex = (category) => {
    
  }

  return (
    <div className="container">
      <div className="result">
        <img src="https://res.cloudinary.com/dc2c49xov/image/upload/v1731168704/lego-figurine/rsmsanvcq4qqgerpb5hm.webp" />

        <img
          className="piece"
          src={pieces.expression[expressionIndex].preview}
        />

        <img
          className="piece"
          src={pieces.outfit[outfitIndex].preview}
        />

        <img
          className="piece"
          src={pieces.hair[hairIndex].preview}
        />
      </div>

      <div className="options">

        {['hair', 'expression', 'outfit'].map((category) => {
          return (
            <div className="section">
              <h2>{category}</h2>
              <div className="grid">
                {pieces[category].map((item, index) => (
                  <button
                    key={index}
                    onClick={() => setExpressionIndex(index)}
                    className={expressionIndex === index ? "active" : ""}
                  >
                    <img src={item.thumbnail} />
                  </button>
                ))}
              </div>
            </div>
          )
        })}

        {/* <div className="section">
          <h2>Expression</h2>
          <div className="grid">
            {pieces['expression'].map((item, index) => (
              <button
                key={index}
                onClick={() => setExpressionIndex(index)}
                className={expressionIndex === index ? "active" : ""}
              >
                <img src={item.thumbnail} />
              </button>
            ))}
          </div>
        </div>

        <div className="section">
          <h2>Hair</h2>
          <div className="grid">
            {pieces['hair'].map((item, index) => (
              <button
                key={index}
                onClick={() => setHairIndex(index)}
                className={hairIndex === index ? "active" : ""}
              >
                <img src={item.thumbnail} />
              </button>
            ))}
          </div>
        </div>

        <div className="section">
          <h2>Outfit</h2>
          <div className="grid">
            {pieces.outfit.map((item, index) => (
              <button
                key={index}
                onClick={() => setOutfitIndex(index)}
                className={outfitIndex === index ? "active" : ""}
              >
                <img src={item.thumbnail} />
              </button>
            ))}
          </div>
        </div> */}

        <button className="random" onClick={randomize}>
          Randomize
        </button>

      </div>
    </div>
  );
}

export default App;