TEST

import { useState } from „react“;
import { motion } from „framer-motion“;

export default function MouseNavigation() {
const [selectedOption, setSelectedOption] = useState(null);
const [subOptions, setSubOptions] = useState([]);

const options = [„1“, „2“, „3“];
const subOptionsMap = {
„1“: [„A“, „B“, „C“, „D“, „E“],
„2“: [„F“, „G“, „H“, „I“, „J“],
„3“: [„K“, „L“, „M“, „N“, „O“],
};

const handleSelect = (option) => {
setSelectedOption(option);
setSubOptions(subOptionsMap[option] || []);
};

return (
🖱 Bod A

  <div className="flex space-x-3">
    {options.map((option) => (
      <motion.div
        key={option}
        className="p-2 bg-blue-300 rounded cursor-pointer"
        whileHover={{ scale: 1.2 }}
        onClick={() => handleSelect(option)}
      >
        {option}
      </motion.div>
    ))}
  </div>

  {selectedOption && (
    <div className="flex space-x-3 mt-3">
      {subOptions.map((sub) => (
        <motion.div
          key={sub}
          className="p-2 bg-green-300 rounded cursor-pointer"
          whileHover={{ scale: 1.2 }}
        >
          {sub}
        </motion.div>
      ))}
    </div>
  )}
</div>

);
}