fetch working

app/components/RestaurantCard.tsx

@@ -1,24 +1,29 @@
 import Link from "next/link";
+import { RestaurantCardType } from "../page";
 
-export default function RestaurantCard() {
+interface Props {
+  restaurant: RestaurantCardType;
+}
+
+export default function RestaurantCard({restaurant}: Props) {
   return (
     <div className="w-64 h-72 m-3 rounded overflow-hidden border cursor-pointer">
-      <Link href="/restaurant/milestonesgrill">
+      <Link href={`/restaurant/${restaurant.slug}`}>
         <img
-          src="https://resizer.otstatic.com/v2/photos/wide-huge/2/31852905.jpg"
+          src={restaurant.main_image}
           alt=""
           className="w-full h-36"
         />
         <div className="p-1">
-          <h3 className="font-bold text-2xl mb-2">Milestones Grill</h3>
+          <h3 className="font-bold text-2xl mb-2">{restaurant.name}</h3>
           <div className="flex items-start">
             <div className="flex mb-2">*****</div>
             <p className="ml-2">77 reviews</p>
           </div>
           <div className="flex text-reg font-light capitalize">
-            <p className=" mr-3">Mexican</p>
+            <p className=" mr-3">{restaurant.cuisine.name}</p>
             <p className="mr-3">$$$$</p>
-            <p>Toronto</p>
+            <p>{restaurant.location.name}</p>
           </div>
           <p className="text-sm mt-1 font-bold">Booked 3 times today</p>
         </div>

app/page.tsx

@@ -1,12 +1,41 @@
 import Header from "./components/Header";
 import RestaurantCard from "./components/RestaurantCard";
+import { PrismaClient, Cuisine, Location, PRICE } from '@prisma/client';
 
-export default function Home() {
+export interface RestaurantCardType {
+  id: number;
+  name: string;
+  main_image: string;
+  cuisine: Cuisine;
+  location: Location;
+  price: PRICE;
+  slug: string;
+}
+const prisma = new PrismaClient();
+
+const fetchRestaurants = async (): Promise<RestaurantCardType[]> => {
+  const restaurants = await prisma.restaurant.findMany({
+    select: {
+      id: true,
+      name: true,
+      main_image: true,
+      cuisine: true,
+      location: true,
+      price: true,
+      slug: true
+    }
+  });
+  return restaurants;
+}
+
+export default async function Home() {
+  const restaurants = await fetchRestaurants();
+  console.log({restaurants})
   return (
     <main>
       <Header />
       <div className="py-3 px-36 mt-10 flex flex-wrap justify-center">
-        <RestaurantCard />
+        {restaurants.map(restaurant => <RestaurantCard restaurant={restaurant} />)}
       </div>
     </main>
   );