more code

app/restaurant/[slug]/components/Description.tsx

@@ -1,12 +1,8 @@
-export default function Description() {
+export default function Description({description}: {description: string}) {
   return (
     <div className="mt-4">
       <p className="text-lg font-light">
-        The classics you love prepared with a perfect twist, all served up in an
+        {description}
-        atmosphere that feels just right. That’s the Milestones promise. So,
-        whether you’re celebrating a milestone, making the most of Happy Hour or
-        enjoying brunch with friends, you can be sure that every Milestones
-        experience is a simple and perfectly memorable one.
       </p>
     </div>
   );

app/restaurant/[slug]/components/Header.tsx

@@ -1,9 +1,16 @@
-export default function Header() {
+export default function Header({name}: {name: string}) {
+
+  const renderTitle = () => {
+    const nameArray = name.split("-");
+    nameArray[nameArray.length - 1 ] = `(${nameArray[nameArray.length - 1 ]})`
+    return nameArray.join(" ");
+  }
+
   return (
     <div className="h-96 overflow-hidden">
       <div className="bg-center bg-gradient-to-r from-[#0f1f47] to-[#5f6984] h-full flex justify-center items-center">
-        <h1 className="text-7xl text-white captitalize text-shadow text-center">
+        <h1 className="text-7xl text-white capitalize text-shadow text-center">
-          Milestones Grill (Toronto)
+          {renderTitle()}
         </h1>
       </div>
     </div>

app/restaurant/[slug]/components/Images.tsx

@@ -1,33 +1,15 @@
-export default function Images() {
+export default function Images({images}: {images: string[]}) {
   return (
     <div>
-      <h1 className="font-bold text-3xl mt-10 mb-7 border-b pb-5">5 photos</h1>
+      <h1 className="font-bold text-3xl mt-10 mb-7 border-b pb-5">{images.length} photo{images.length > 1 ? "s" : ""}</h1>
       <div className="flex flex-wrap">
-        <img
+        {images.map(image => (
+          <img
           className="w-56 h-44 mr-1 mb-1"
-          src="https://resizer.otstatic.com/v2/photos/xlarge/3/41701449.jpg"
+          src={image}
-          alt=""
-        />
-        <img
-          className="w-56 h-44 mr-1 mb-1"
-          src="https://resizer.otstatic.com/v2/photos/xlarge/2/41701450.jpg"
-          alt=""
-        />
-        <img
-          className="w-56 h-44 mr-1 mb-1"
-          src="https://resizer.otstatic.com/v2/photos/xlarge/2/41701452.jpg"
-          alt=""
-        />
-        <img
-          className="w-56 h-44 mr-1 mb-1"
-          src="https://resizer.otstatic.com/v2/photos/xlarge/2/41701453.jpg"
-          alt=""
-        />
-        <img
-          className="w-56 h-44 mr-1 mb-1"
-          src="https://resizer.otstatic.com/v2/photos/xlarge/2/41701454.jpg"
           alt=""
         />
+        ))}
       </div>
     </div>
   );

app/restaurant/[slug]/components/Menu.tsx

@@ -1,15 +1,24 @@
 import MenuCard from "./MenuCard";
+import { Item } from "@prisma/client";
 
-export default function Menu() {
+export default function Menu({ menu }: { menu: Item[] }) {
   return (
     <main className="bg-white mt-5">
       <div>
         <div className="mt-4 pb-1 mb-1">
           <h1 className="font-bold text-4xl">Menu</h1>
         </div>
-        <div className="flex flex-wrap justify-between">
+        {menu.length ? (
-          <MenuCard />
+          <div className="flex flex-wrap justify-between">
-        </div>
+            {menu.map((item) => {
+              return <MenuCard key={item.id} item={item} />;
+            })}
+          </div>
+        ) : (
+          <div className="flex flex-wrap justify-between">
+            <p>This restaurant does not have a menu</p>
+          </div>
+        )}
       </div>
     </main>
   );

app/restaurant/[slug]/components/MenuCard.tsx

@@ -1,11 +1,11 @@
-export default function MenuCard() {
+import { Item } from "@prisma/client";
+
+export default function MenuCard({item}: {item: Item}) {
   return (
     <div className=" border rounded p-3 w-[49%] mb-3">
-      <h3 className="font-bold text-lg">Surf and Turf</h3>
+      <h3 className="font-bold text-lg">{item.name}</h3>
-      <p className="font-light mt-1 text-sm">
+      <p className="font-light mt-1 text-sm">{item.description}</p>
-        A well done steak with lobster and rice
+      <p className="mt-7">{item.price}</p>
-      </p>
-      <p className="mt-7">$80.00</p>
     </div>
   );
 }

app/restaurant/[slug]/components/RestaurantNavBar.tsx

@@ -1,12 +1,12 @@
 import Link from "next/link";
 
-export default function RestaurantNavBar() {
+export default function RestaurantNavBar({slug}: {slug: string} ) {
   return (
     <nav className="flex text-reg border-b pb-2">
-      <Link href="/restaurant/milestonegrill/" className="mr-7">
+      <Link href={`/restaurant/${slug}/`} className="mr-7">
         Overview
       </Link>
-      <Link href="/restaurant/milestonegrill/menu" className="mr-7">
+      <Link href={`/restaurant/${slug}/menu`} className="mr-7">
         Menu
       </Link>
     </nav>

app/restaurant/[slug]/components/Title.tsx

@@ -1,7 +1,7 @@
-export default function Title() {
+export default function Title({name}: {name:string}) {
   return (
     <div className="mt-4 border-b pb-6">
-      <h1 className="font-bold text-6xl">Milesstone Grill</h1>
+      <h1 className="font-bold text-6xl">{name}</h1>
     </div>
   );
 }

app/restaurant/[slug]/layout.tsx

@@ -2,12 +2,14 @@ import Header from "./components/Header";
 
 export default function RestorantLayout({
   children,
+  params
 }: {
   children: React.ReactNode;
+  params: {slug: string}
 }) {
   return (
     <main>
-      <Header />
+      <Header name={params.slug}/>
       <div className="flex m-auto w-2/3 justify-between items-start 0 -mt-11">
         {children}
       </div>

app/restaurant/[slug]/menu/page.tsx

@@ -1,12 +1,33 @@
+import { PrismaClient } from "@prisma/client";
 import Header from "../components/Header";
 import Menu from "../components/Menu";
 import RestaurantNavBar from "../components/RestaurantNavBar";
 
-export default function RestaurantMenu() {
+const prisma = new PrismaClient();
+
+const fetchRestaurantMenu = async (slug: string) => {
+  const restaurant = await prisma.restaurant.findUnique({
+    where: {
+      slug
+    },
+    select: {
+      items: true
+    }
+  })
+
+  if (!restaurant) {
+    throw new Error
+  }
+
+  return restaurant.items
+}
+
+export default async function RestaurantMenu({params}: {params: {slug: string}}) {
+  const menu = await fetchRestaurantMenu(params.slug)
   return (
     <div className="bg-white w-[100%] rounded p-3 shadow">
-      <RestaurantNavBar />
+      <RestaurantNavBar slug={params.slug} />
-      <Menu />
+      <Menu menu={menu}/>
     </div>
   );
 }

app/restaurant/[slug]/page.tsx

@@ -47,11 +47,11 @@ export default async function RestaurantDetails({
   return (
     <>
       <div className="bg-white w-[70%] rounded p-3 shadow">
-        <RestaurantNavBar />
+        <RestaurantNavBar slug={restaurant.slug}/>
-        <Title />
+        <Title name={restaurant.name}/>
         <Rating />
-        <Description />
+        <Description description={restaurant.description}/>
-        <Images />
+        <Images images={restaurant.images}/>
         <Reviews />
       </div>
       <div className="w-[27%] relative text-reg">