add tree view project

src/App.jsx

@@ -10,6 +10,8 @@ import RandomColor from "@/pages/RandomColor";
 import StarRating from "@/pages/StarRating";
 import ImageSlider from "@/pages/ImageSlider"
 import LoadMoreData from "./pages/LoadMoreData";
+import TreeView from "./pages/tree-view/TreeView";
+import menus from "./pages/tree-view/data";
 
 function App() {
   return (
@@ -28,6 +30,8 @@ function App() {
           <Route path='image-slider' element={<ImageSlider url={'https://meme-api.com/gimme'} limit={10} />} />
           {/* load more data button */}
           <Route path='load-more-data' element={<LoadMoreData />} />
+          {/* tree view */}
+          <Route path="tree-view" element={<TreeView menus={menus} />} />
 
           {/* Error Page */}
           <Route path="*" element={<NotFound />} />

src/pages/Home.jsx

@@ -10,6 +10,7 @@ function Home() {
       <Link to='star-rating'>star rating</Link>
       <Link to='image-slider'>image slider</Link>
       <Link to='load-more-data'>load more button</Link>
+      <Link to='tree-view'>tree view</Link>
     </div>
   );
 }

src/pages/LoadMoreData.jsx

@@ -36,7 +36,7 @@ function LoadMoreData() {
   if (loading) {
     return <div>Loading data ! Please wait man</div>;
   }
-  console.log(products)
+  console.log(products);
 
   return (
     <div

src/pages/tree-view/MenuItem.jsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import MenuList from "./MenuList";
+import { FaMinus, FaPlus } from "react-icons/fa";
+
+function MenuItem({ item }) {
+  const [displayCurrentChildren, setDisplayCurrentChildren] = useState({});
+
+  function handleToggleChildren(getCurrentLabel) {
+    setDisplayCurrentChildren({
+      ...displayCurrentChildren,
+      [getCurrentLabel]: !displayCurrentChildren[getCurrentLabel],
+    });
+  }
+
+  return (
+    <li>
+      <div
+        className="flex gap-4 cursor-pointer"
+        onClick={() => handleToggleChildren(item.label)}
+      >
+        <p>{item.label}</p>
+        {item && item.children && item.children.length ? (
+          <span className="flex justify-center items-center">
+            {displayCurrentChildren[item.label] ? <FaMinus className="text-xs"/> : <FaPlus className="text-xs" />}
+          </span>
+        ) : null}
+      </div>
+
+      {item &&
+        item.children &&
+        item.children.length > 0 &&
+        displayCurrentChildren[item.label] ? (
+        <MenuList list={item.children} />
+      ) : null}
+    </li>
+  );
+}
+
+export default MenuItem;

src/pages/tree-view/MenuList.jsx

@@ -0,0 +1,15 @@
+import MenuItem from "./MenuItem";
+
+function MenuList({ list = [] }) {
+  return (
+    <ul className="menu-list container">
+      {list && list.length
+        ? list.map((listItem, index) => (
+          <MenuItem key={index} item={listItem} />
+        ))
+        : null}
+    </ul>
+  );
+}
+
+export default MenuList;

src/pages/tree-view/TreeView.jsx

@@ -0,0 +1,11 @@
+import MenuList from "./MenuList"
+
+function TreeView({menus = []})  {
+  return (
+    <div className="container">
+      <MenuList list={menus} />
+    </div>
+  )
+}
+
+export default TreeView

src/pages/tree-view/data.js

@@ -0,0 +1,60 @@
+export const menus = [
+  {
+    label: "Home",
+    to: "/",
+  },
+  {
+    label: "Profile",
+    to: "/profile",
+    children: [
+      {
+        label: "Details",
+        to: "details",
+        children: [
+          {
+            label: "Location",
+            to: "location",
+            children: [
+              {
+                label: "City",
+                to: "city",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Settings",
+    to: "/settings",
+    children: [
+      {
+        label: "Account",
+        to: "account",
+      },
+      {
+        label: "Security",
+        to: "security",
+        children: [
+          {
+            label: "Login",
+            to: "login",
+          },
+          {
+            label: "Register",
+            to: "register",
+            children: [
+              {
+                label: "Random data",
+                to: "",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export default menus;