sidebar filters ready

app/search/components/SearchSideBar.tsx

@@ -1,33 +1,80 @@
-export default function SearchSideBar() {
+import { Cuisine, Location, PRICE } from "@prisma/client";
+import Link from "next/link";
+
+export default async function SearchSideBar({
+  locations,
+  cuisines,
+  searchParams
+}: {
+  locations: Location[];
+  cuisines: Cuisine[];
+  searchParams: {city?: string, location?: string, cuisine?: string, price: PRICE}
+}) {
+  console.log("cuisines: ", cuisines);
+  console.log("locations: ", locations);
+
+  const priceStyle = "border w-full text-reg font-light p-2 text-center"
+  const prices = [
+    {label: "$", price: PRICE.CHEAP, className: `${priceStyle} rounded-l`},
+    {label: "$$", price: PRICE.REGULAR, className: `${priceStyle} `},
+    {label: "$$$", price: PRICE.EXPENSIVE, className: `${priceStyle} rounded-r`}
+  ];
+
   return (
     <div className="w-1/5">
-      <div className="border-b pb-4">
+      <div className="border-b pb-4 flex flex-col">
         <h1 className="mb-2">Region</h1>
-        <p className="font-light text-reg">Toronto</p>
-        <p className="font-light text-reg">Ottawa</p>
-        <p className="font-light text-reg">Montreal</p>
-        <p className="font-light text-reg">Hamilton</p>
-        <p className="font-light text-reg">Kingston</p>
-        <p className="font-light text-reg">Niagara</p>
+        {locations.map((location, index) => (
+          <Link
+            href={{
+              pathname: "/search",
+              query: {
+                ...searchParams,
+                city: location.name,
+              },
+            }}
+            key={index}
+            className="font-light text-reg"
+          >
+            {location.name}
+          </Link>
+        ))}
       </div>
-      <div className="border-b pb-4 mt-3">
+      <div className="border-b pb-4 mt-3 flex flex-col">
         <h1 className="mb-2">Cuisine</h1>
-        <p className="font-light text-reg">Mexican</p>
-        <p className="font-light text-reg">Italian</p>
-        <p className="font-light text-reg">Chinese</p>
+        {cuisines.map((cuisine, index) => (
+          <Link
+            href={{
+              pathname: "/search",
+              query: {
+                ...searchParams,
+                cuisine: cuisine.name,
+              },
+            }}
+            key={index}
+            className="font-light text-reg"
+          >
+            {cuisine.name}
+          </Link>
+        ))}
       </div>
       <div className="mt-3 pb-4">
         <h1 className="mb-2">Price</h1>
         <div className="flex">
-          <button className="border w-full text-reg font-light rounded-l p-2">
-            $
-          </button>
-          <button className="border-r border-t border-b w-full text-reg font-light p-2">
-            $$
-          </button>
-          <button className="border-r border-t border-b w-full text-reg font-light p-2 rounded-r">
-            $$$
-          </button>
+          {
+            prices.map(({price, label, className}) => (
+              <Link
+                href={{
+                pathname: "/search",
+                query: {
+                  ...searchParams,
+                  price: price,
+                },
+              }} className={className}>
+              {label}
+            </Link>
+            ))
+          }
         </div>
       </div>
     </div>