feat: add routing, useable navbar and art description page

src/App.jsx

@@ -1,26 +1,38 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Navbar from './components/Navbar';
-import Home from './pages/Home';
 import Footer from './components/Footer';
-import ErrorPage from './pages/Error';
+
+import Home from './pages/Home';
 import TopPicks from './pages/TopPicks';
+import ArtDescription from './pages/ArtDescription';
+import ErrorPage from './pages/Error';
 
 function App() {
   return (
     <div className="flex flex-col justify-start items-start min-h-screen bg-gray-100">
       <Router>
+        {/* Navigation Bar */}
         <Navbar />
 
+        {/* Route Definitions */}
         <Routes>
+          {/* Home Page */}
           <Route exact path="/artistry-hub/" element={<Home />} />
+
+          {/* Top Picks Page */}
           <Route exact path="/artistry-hub/top-picks" element={<TopPicks />} />
-          {/* <Route component={GenericNotFound} /> */}
+
+          {/* Art Description Page */}
+          <Route path="/artistry-hub/art/:id" element={<ArtDescription />} />
+
+          {/* Fallback Error Page for Unmatched Routes */}
           <Route path="*" element={<ErrorPage />} />
         </Routes>
       </Router>
+
+      {/* Footer */}
       <Footer />
     </div>
   );
 }
-
 export default App;

src/components/Navbar.jsx

@@ -11,73 +11,86 @@ import {
   Autocomplete,
   AutocompleteItem,
 } from '@nextui-org/react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { FaSearch } from 'react-icons/fa';
 import { allLists } from '../data/list';
 
-const SearchAutocomplete = ({ allLists }) => (
-  <Autocomplete
-    defaultItems={allLists}
-    aria-label="Search for Artworks"
-    classNames={{
-      base: 'max-w-lg',
-      listboxWrapper: 'max-h-[320px]',
-      selectorButton: 'text-default-500',
-    }}
-    inputProps={{
-      classNames: {
-        input: 'ml-1',
-        inputWrapper: 'h-[48px]',
-      },
-    }}
-    listboxProps={{
-      hideSelectedIcon: true,
-      itemClasses: {
-        base: [
-          'rounded-medium',
-          'text-default-500',
-          'transition-opacity',
-          'data-[hover=true]:text-foreground',
-          'dark:data-[hover=true]:bg-default-50',
-          'data-[pressed=true]:opacity-70',
-          'data-[hover=true]:bg-default-200',
-          'data-[selectable=true]:focus:bg-default-100',
-          'data-[focus-visible=true]:ring-default-500',
-        ],
-      },
-    }}
-    placeholder="Search"
-    popoverProps={{
-      offset: 10,
-      classNames: {
-        base: 'rounded-large',
-        content: 'p-1 border-small border-default-100 bg-background',
-      },
-    }}
-    startContent={<FaSearch size={18} />}
-    radius="full"
-    variant="bordered"
-  >
-    {(item) => (
-      <AutocompleteItem key={item.id} textValue={item.name}>
-        <div className="flex justify-between items-center">
-          <div className="flex gap-2 items-center">
-            <Avatar
-              alt={item.name}
-              className="flex-shrink-0"
-              size="sm"
-              src={item.img}
-            />
-            <div className="flex flex-col">
-              <span className="text-small">{item.name}</span>
-              <span className="text-tiny text-default-400">{item.artist}</span>
+const SearchAutocomplete = ({ allLists }) => {
+  const navigate = useNavigate();
+
+  const handleSelectionChange = (id) => {
+    if (id) {
+      navigate(`/artistry-hub/art/${id}`);
+    }
+  };
+  return (
+    <Autocomplete
+      defaultItems={allLists}
+      aria-label="Search for Artworks"
+      classNames={{
+        base: 'max-w-lg',
+        listboxWrapper: 'max-h-[320px]',
+        selectorButton: 'text-default-500',
+      }}
+      inputProps={{
+        classNames: {
+          input: 'ml-1',
+          inputWrapper: 'h-[48px]',
+        },
+      }}
+      listboxProps={{
+        hideSelectedIcon: true,
+        itemClasses: {
+          base: [
+            'rounded-medium',
+            'text-default-500',
+            'transition-opacity',
+            'data-[hover=true]:text-foreground',
+            'dark:data-[hover=true]:bg-default-50',
+            'data-[pressed=true]:opacity-70',
+            'data-[hover=true]:bg-default-200',
+            'data-[selectable=true]:focus:bg-default-100',
+            'data-[focus-visible=true]:ring-default-500',
+          ],
+        },
+      }}
+      placeholder="Search"
+      popoverProps={{
+        offset: 10,
+        classNames: {
+          base: 'rounded-large',
+          content: 'p-1 border-small border-default-100 bg-background',
+        },
+      }}
+      startContent={<FaSearch size={18} />}
+      radius="full"
+      variant="bordered"
+      onSelectionChange={(key) => handleSelectionChange(key)}
+      itemToString={(item) => item?.name}
+    >
+      {(item) => (
+        <AutocompleteItem key={item.id} textValue={item.name}>
+          <div className="flex justify-between items-center">
+            <div className="flex gap-2 items-center">
+              <Avatar
+                alt={item.name}
+                className="flex-shrink-0"
+                size="sm"
+                src={item.img}
+              />
+              <div className="flex flex-col">
+                <span className="text-small">{item.name}</span>
+                <span className="text-tiny text-default-400">
+                  {item.artist}
+                </span>
+              </div>
             </div>
           </div>
-        </div>
-      </AutocompleteItem>
-    )}
-  </Autocomplete>
-);
+        </AutocompleteItem>
+      )}
+    </Autocomplete>
+  );
+};
 
 const UserProfileDropdown = () => (
   <Dropdown placement="bottom-end">

src/pages/ArtDescription.jsx

@@ -0,0 +1,51 @@
+import { useParams } from 'react-router-dom';
+import { allLists } from '../data/list';
+import { Card, CardHeader, CardBody, Image } from '@nextui-org/react';
+
+const ArtDescription = () => {
+  let { id } = useParams();
+  let artItem = null;
+
+  // Iterate over each list in allLists to find the art item
+  for (const listKey in allLists) {
+    if (Object.prototype.hasOwnProperty.call(allLists, listKey)) {
+      artItem = allLists[listKey].find((item) => item.id.toString() === id);
+      if (artItem) break;
+    }
+  }
+
+  //   if (!artItem) {
+  //     return <div className="text-xl font-bold p-4">Artwork not found</div>;
+  //   }
+
+  return (
+    <div className="flex flex-col md:flex-row p-4 gap-4">
+      <div className="flex-1">
+        <Image
+          src={artItem.img}
+          alt={artItem.name}
+          objectFit="cover"
+          width="100%"
+          height="100%"
+        />
+      </div>
+      <div className="flex-1">
+        <Card>
+          <CardHeader>
+            <h2 className="text-2xl font-bold">{artItem.name}</h2>
+            <p className="text-lg"> by {artItem.artist}</p>
+          </CardHeader>
+          <CardBody>
+            <p className="text-md">{artItem.description}</p>
+            <p className="text-md">Year: {artItem.date}</p>
+            <p className="text-md">Style: {artItem.style}</p>
+            <p className="text-md">Dimensions: {artItem.dimensions}</p>
+            <p className="text-md">Location: {artItem.location}</p>
+          </CardBody>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default ArtDescription;