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>

);
}