dynamik links on home

src/App.jsx

@@ -2,6 +2,7 @@ import { ThemeProvider } from "@/components/theme-provider";
 import { Route, Routes } from "react-router-dom";
 // Data
 import menus from "./pages/tree-view/data";
+import { projects } from "./data/projects";
 // Layouts
 import Header from "@/layouts/header";
 // Pages
@@ -10,7 +11,7 @@ import NotFound from "@/pages/404";
 import Accordion from "@/pages/accordion/accordion";
 import RandomColor from "@/pages/RandomColor";
 import StarRating from "@/pages/StarRating";
-import ImageSlider from "@/pages/ImageSlider"
+import ImageSlider from "@/pages/ImageSlider";
 import LoadMoreData from "./pages/LoadMoreData";
 import TreeView from "./pages/tree-view/TreeView";
 import QRCodeGenerator from "./pages/QRCodeGenerator";
@@ -29,9 +30,14 @@ function App() {
  {/* Star Rating */}
  <Route path="star-rating" element={<StarRating />} />
  {/* image Slider */}
- <Route path='image-slider' element={<ImageSlider url={'https://meme-api.com/gimme'} limit={10} />} />
+ <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 />} />
+ <Route path="load-more-data" element={<LoadMoreData />} />
  {/* tree view */}
  <Route path="tree-view" element={<TreeView menus={menus} />} />
  {/* generate QR code */}

src/data/projects.js

@@ -0,0 +1,38 @@
+export const projects = [
+ {
+ id: 1,
+ name: "Accordion",
+ path: 'accordion'
+ },
+ {
+ id: 2,
+ name: "Random Color Generator",
+ path: 'color-generator'
+ },
+ {
+ id: 3,
+ name: "Star Rating",
+ path: 'star-rating'
+ },
+ {
+ id: 4,
+ name: "Image Slider",
+ path: 'image-slider'
+ },
+ {
+ id: 5,
+ name: "Load More Button",
+ path: 'load-more-data'
+ },
+ {
+ id: 6,
+ name: "Tree View",
+ path: 'tree-view'
+ },
+ {
+ id: 7,
+ name: "QR Code Generator",
+ path: 'qr-code-generator'
+ }
+];
+

src/pages/Home.jsx

@@ -1,17 +1,21 @@
+import { projects } from "@/data/projects";
 import { Link } from "react-router-dom";
 
 function Home() {
  return (
  <div className="flex flex-col gap-3 justify-start items-center">
- <p className="text-xl">this page under <span className="font-bold text-primary">development</span></p> 
- <p className="text-neutral-500 text-xs">I&apos;ll start on it when add the first componenet (project)</p>
- <Link to='accordion'>accordion</Link>
- <Link to='color-generator'>random Color Generator</Link>
- <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>
- <Link to='qr-code-generator'>QR code generator</Link>
+ <p className="text-xl">
+ this page under{" "}
+ <span className="font-bold text-primary">development</span>
+ </p>
+ <p className="text-neutral-500 text-xs">
+ I&apos;ll start on it when add the first componenet (project)
+ </p>
+ {projects.map((item) => (
+ <Link key={item.id} to={item.path}>
+ {item.name}
+ </Link>
+ ))}
  </div>
  );
 }