restaurants are ready

app/components/SearchBar.tsx

@@ -19,8 +19,8 @@ export default function SearchBar() {
       <button
         className="rounded bg-red-600 px-9 py-2 text-white"
         onClick={() => {
-          if (location === "banana") return;
-          router.push("/search");
+          if (location === "") return;
+          router.push(`/search?city=${location}`);
         }}
       >
         Let's go

app/search/components/RestaurantCard.tsx

@@ -1,29 +1,41 @@
+import { Cuisine, PRICE, Location } from "@prisma/client";
 import Link from "next/link";
+import Price from "../../components/Price";
 
-export default function RestaurantCard() {
+interface Restaurant {
+  cuisine: Cuisine;
+  name: string;
+  location: Location;
+  id: number;
+  price: PRICE;
+  main_image: string;
+  slug: string;
+}
+
+export default function RestaurantCard({restaurant}: {restaurant: Restaurant;} ) {
   return (
     <div className="border-b flex pb-5">
       <Link href="/restaurant/milestones">
         <img
-          src="https://images.otstatic.com/prod1/49153814/2/medium.jpg"
+          src={restaurant.main_image}
           alt=""
           className="w-44 rounded"
         />
         <div className="pl-5">
-          <h2 className="text-3xl">Aiāna Restaurant Collective</h2>
+          <h2 className="text-3xl">{restaurant.name}</h2>
           <div className="flex items-start">
             <div className="flex mb-2">*****</div>
             <p className="ml-2 text-sm">Awesome</p>
           </div>
           <div className="mb-9">
             <div className="font-light flex text-reg">
-              <p className="mr-4">$$$</p>
-              <p className="mr-4">Mexican</p>
-              <p className="mr-4">Ottawa</p>
+              <Price price={restaurant.price} />
+              <p className="mr-4">{restaurant.cuisine.name}</p>
+              <p className="mr-4">{restaurant.location.name}</p>
             </div>
           </div>
           <div className="text-red-600">
-            <a href="">View more information</a>
+            <Link href={`/restaurant/${restaurant.slug}`}>View more information</Link>
           </div>
         </div>
       </Link>

app/search/page.tsx

@@ -1,15 +1,52 @@
+import { PrismaClient, Restaurant } from "@prisma/client";
 import Header from "../components/Header";
 import RestaurantCard from "./components/RestaurantCard";
 import SearchSideBar from "./components/SearchSideBar";
 
-export default function Search() {
+const prisma = new PrismaClient();
+
+const fetchRestaurantsByCity = (city: string | undefined) => {
+  const select = {
+    id: true,
+    name: true,
+    main_image: true,
+    price: true,
+    cuisine: true,
+    location: true,
+    slug: true
+  }
+
+  if (!city) return prisma.restaurant.findMany({select});
+
+  return prisma.restaurant.findMany({
+    where: {
+      location: {
+        name: {
+          equals: city.toLowerCase()
+        }
+      }
+    },
+    select
+  })
+
+}
+
+export default async function Search({searchParams}: {searchParams: {city: string}}) {
+  const restaurants = await fetchRestaurantsByCity(searchParams.city)
+  console.log(restaurants)
   return (
     <>
       <Header />
       <div className="flex py-4 m-auto w-2/3 justify-between items-start">
         <SearchSideBar />
         <div className="w-5/6">
-          <RestaurantCard />
+          {
+          restaurants.length
+          ? restaurants.map(restaurant => {
+              return <RestaurantCard restaurant={restaurant}/>
+            })
+          : <p>No restaurants</p>
+          }
         </div>
       </div>
     </>