📦 jaberjaber23 / neural-architecture-visualizer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47import React from 'react';
import { motion } from 'framer-motion';

const HierarchicalList = ({ items, selectedComponent, setSelectedComponent }) => {
  return (
    <ul className="space-y-2">
      {items.map((item, index) => (
        <li key={index}>
          {item.component ? (
            <motion.button
              className={`text-left w-full py-1 px-2 rounded ${
                selectedComponent === item.component ? 'bg-blue-100 font-bold' : 'hover:bg-gray-100'
              }`}
              onClick={() => setSelectedComponent(item.component)}
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              {item.name}
            </motion.button>
          ) : (
            <span className="font-semibold">{item.name}</span>
          )}
          {item.children && (
            <ul className="pl-4 mt-1 space-y-1">
              {item.children.map((child, childIndex) => (
                <li key={childIndex}>
                  <motion.button
                    className={`text-left w-full py-1 px-2 rounded ${
                      selectedComponent === child.component ? 'bg-blue-100 font-bold' : 'hover:bg-gray-100'
                    }`}
                    onClick={() => setSelectedComponent(child.component)}
                    whileHover={{ scale: 1.05 }}
                    whileTap={{ scale: 0.95 }}
                  >
                    {child.name}
                  </motion.button>
                </li>
              ))}
            </ul>
          )}
        </li>
      ))}
    </ul>
  );
};

export default HierarchicalList;