Turned menu into component for reusability

Websites/jefes-nextjs/app/menu/Appetizers/items.json

@@ -6,6 +6,7 @@
         "price_large": 7,
         "price_small": 5,
         "spicy": "no",
+        "favorite": "yes",
         "description": "avocado dripppppp"
     },
     {

Websites/jefes-nextjs/app/menu/Appetizers/page.tsx

@@ -3,76 +3,79 @@ import Image from "next/image";
 import "./appetizers.css";
 import Menu from "./items.json";
 import { Button } from "@/components/ui/button";
+import MenuCard from "../MenuCard/MenuCard";
 
 const Appetizers = () => {
   return (
-    <div className="flex flex-col w-full">
+    <main>
-      <div className="text-4xl flex flex-row text-black antialiased font-bold items-center justify-center">
+      <MenuCard Menu={Menu} />
-        <Image
+      {/* <div className="flex flex-col w-full">
-          src="/gun01.svg"
+        <div className="text-4xl flex flex-row text-black antialiased font-bold items-center justify-center">
-          alt="gun icon for decor"
+          <Image
-          className="rotate-45"
+            src="/gun01.svg"
-          width={70}
+            alt="gun icon for decor"
-          height={50}
+            className="rotate-45"
-        />
+            width={70}
-        <div className="">Appetizers</div>
+            height={50}
-        <Image
+          />
-          src="/gun01.svg"
+          <div className="">Appetizers</div>
-          alt="gun icon for decor"
+          <Image
-          className="gun_menu gun_rotate"
+            src="/gun01.svg"
-          width={70}
+            alt="gun icon for decor"
-          height={50}
+            className="gun_menu gun_rotate"
-        />
+            width={70}
-      </div>
+            height={50}
-      {/* Mapping out the menu */}
+          />
-      <div className=" flex flex-wrap gap-8 pt-6 justify-between w-full">
+        </div> */}
-        {Menu.map((menu_item) => {
+        {/* Mapping out the menu */}
-          return (
+        {/* <div className=" flex flex-wrap gap-8 pt-6 justify-between w-full">
-            <div
+          {Menu.map((menu_item) => {
-              key={menu_item.id}
+            return (
-              className="flex flex-col flex-grow bg-blue-300 h-[452px] w-[325px] rounded-lg shadow-xl drop-shadow-xl"
+              <div
-            >
+                key={menu_item.id}
-              <div className="h-[55%] relative w-full overflow-hidden">
+                className="flex flex-col flex-grow bg-blue-300 h-[452px] w-[325px] rounded-lg shadow-xl drop-shadow-xl"
-                <Image
+              >
-                  src={`/${menu_item.photo}`}
+                <div className="h-[55%] relative w-full overflow-hidden">
-                  alt="chili pepper spice"
+                  <Image
-                  fill
+                    src={`/${menu_item.photo}`}
-                  style={{ objectFit: "cover", objectPosition: "center" }}
+                    alt="chili pepper spice"
-                  quality={100}
+                    fill
-                  className="rounded-t-lg"
+                    style={{ objectFit: "cover", objectPosition: "center" }}
-                />
+                    quality={100}
-              </div>
+                    className="rounded-t-lg"
-              <h4 className="">
+                  />
-                <strong>{menu_item.name}</strong>
-              </h4>
-              <p className="max-w-[75ch]">Description: {menu_item.description}</p>
-              <div className="flex flex-row bg-gray-500 justify-evenly">
-                <div className="bg-red-400 flex flex-row">
-                  <span>
-                    {menu_item.price_large ? (
-                      <span>
-                        <strong>Large</strong> - ${menu_item.price_large},
-                        <strong>Small</strong> - ${menu_item.price_small}
-                      </span>
-                    ) : (
-                      <span>${menu_item.price}</span>
-                    )}
-                  </span>
                 </div>
-                <div className="flex bg-emerald-400 w-1/2 relative">
+                <h4 className="">
-                  <div className="flex bg-blue-600 w-3 h-full items-end justify-end">
+                  <strong>{menu_item.name}</strong>
-                    <div className="">
+                </h4>
-                      
+                <p className="max-w-[75ch]">
+                  Description: {menu_item.description}
+                </p>
+                <div className="flex flex-row bg-gray-500 justify-evenly">
+                  <div className="bg-red-400 flex flex-row">
+                    <span>
+                      {menu_item.price_large ? (
+                        <span>
+                          <strong>Large</strong> - ${menu_item.price_large},
+                          <strong>Small</strong> - ${menu_item.price_small}
+                        </span>
+                      ) : (
+                        <span>${menu_item.price}</span>
+                      )}
+                    </span>
+                  </div>
+                  <div className="flex bg-emerald-400 w-1/2 relative">
+                    <div className="flex bg-blue-600 w-3 h-full items-end justify-end">
+                      <div className=""></div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
+            );
-          );
+          })}
-        })}
+        </div>
-      </div>
+      </div> */}
-
+        {/* <div className="col-span-2 gap-6 bg-green-400">
-      {/* <div className="col-span-2 gap-6 bg-green-400">
         <div className="flex flex-row space-x-2 bg-gray-400">
           <h4 className="text-semibold">
             Guacamole Dip 
@@ -100,7 +103,7 @@ const Appetizers = () => {
           </div>
         </div>
       </div> */}
-    </div>
+    </main>
   );
 };
 

Websites/jefes-nextjs/app/menu/Bar/items.json

@@ -5,6 +5,8 @@
         "photo": "Bar/32ozCaguamas.jpeg",
         "price": 14,
         "size": "32oz",
+        "spicy": "no",
+        "favorite": "no",
         "description": "A drink."
     },
     {
@@ -13,6 +15,8 @@
         "photo": "Bar/100ozTower.jpeg",
         "price": 35,
         "size": "100oz",
+        "spicy": "yes",
+        "favorite": "no",
         "description": "A tower full of Corona."
     },
     {
@@ -21,6 +25,8 @@
         "photo": "Bar/chambong.jpeg",
         "price": 18,
         "size": "36oz",
+        "spicy": "no",
+        "favorite": "yes",
         "description": "El Chambong."
     },
     {
@@ -29,6 +35,8 @@
         "photo": "Bar/laMeraMera56ozMargarita.jpeg",
         "price": 20,
         "size": "56oz",
+        "spicy": "yes",
+        "favorite": "yes",
         "description": "The special margarita."
     },
     {
@@ -37,6 +45,8 @@
         "photo": "Bar/Michelada.jpeg",
         "price": 13,
         "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
         "description": "Corona with tamarindo."
     },
     {
@@ -45,6 +55,8 @@
         "photo": "Bar/Michelada.jpeg",
         "price": 13,
         "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
         "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
     }
 ]

Websites/jefes-nextjs/app/menu/Bar/page.tsx

@@ -1,89 +1,14 @@
-"use client";
 import * as React from "react";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import Menu from "./items.json";
 import Image from "next/image";
-import localFont from "next/font/local";
+import MenuCard from "../MenuCard/MenuCard";
-
-const interBold = localFont({
-  src: "./Inter-Bold.woff",
-  display: "swap",
-});
-const extraBold = localFont({
-  src: "./Inter-ExtraBold.woff",
-  display: "swap",
-});
 
 const Bar = () => {
-  let pic = "cover";
   return (
     <main>
-      <div className="grid desktop:grid-cols-5 tablet:grid-cols-3 md:grid-cols-2 grid-flow-row gap-y-6 md:gap-x-6">
+      <MenuCard Menu={Menu} />
-        {Menu.map((menu_item) => {
-          return (
-            <Card
-              key={menu_item.id}
-              className="flex-1 flex-col max-w-[325px] h-[452px] relative"
-            >
-              <div className="w-full h-[55%]">
-                <div className="h-full relative w-full">
-                  <Image
-                    src={`/${menu_item.photo}`}
-                    alt="chili pepper spice"
-                    fill
-                    style={{ objectFit: "cover", objectPosition: "center" }}
-                    quality={100}
-                    className="rounded-t-lg"
-                  />
-                </div>
-              </div>
-              <div className="m-[8px] space-y-[4px]">
-                {/* title and description of item  */}
-                <div className="flex flex-col w-full font-sans">
-                  {/* title and photo */}
-                  <div className="inline-block">
-                    <h4 className={`pt-2 float-left ${extraBold.className}`}>
-                      <strong>{menu_item.name}</strong>
-                    </h4>
-                    {/* <div className="bg-red-300 float-right relative w-[25px] h-[25px]">
-                      <Image
-                        src="/red-chili-pepper.svg"
-                        alt="chili pepper spice"
-                        fill
-                        style={{
-                          objectFit: "contain",
-                        }}
-                        quality={100}
-                        className=""
-                      />
-                    </div> */}
-                  </div>
-                  {/* description text */}
-                  <div className="inline-block text-left pt-2">
-                    <p
-                      className={`max-w-[75ch] ${interBold.className} leading-tight font-[12px] text-[#D7D7D7]`}
-                    >
-                      {menu_item.description}
-                    </p>
-                  </div>
-                </div>
-              </div>
-              {/* cart addon */}
-              <div className="flex flex-row bottom-0 absolute m-2">
-                <div className="flex flex-row">
-                  <strong>{`$${menu_item.price}`}</strong>
-                </div>
-                <div className="flex  w-1/2 relative">
-                  <div className="flex  w-3 h-full items-end justify-end">
-                    <div className=""></div>
-                  </div>
-                </div>
-              </div>
-            </Card>
-          );
-        })}
-      </div>
     </main>
   );
 };

Websites/jefes-nextjs/app/menu/Beverages/items.json

@@ -0,0 +1,62 @@
+[
+    {
+        "id": 1,
+        "name": "Caguamas",
+        "photo": "Bar/32ozCaguamas.jpeg",
+        "price": 14,
+        "size": "32oz",
+        "spicy": "no",
+        "favorite": "no",
+        "description": "A drink."
+    },
+    {
+        "id": 2,
+        "name": "Jefes Tower",
+        "photo": "Bar/100ozTower.jpeg",
+        "price": 35,
+        "size": "100oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "A tower full of Corona."
+    },
+    {
+        "id": 3,
+        "name": "Chambong",
+        "photo": "Bar/chambong.jpeg",
+        "price": 18,
+        "size": "36oz",
+        "spicy": "no",
+        "favorite": "yes",
+        "description": "El Chambong."
+    },
+    {
+        "id": 4,
+        "name": "La Mera Mera Margarita",
+        "photo": "Bar/laMeraMera56ozMargarita.jpeg",
+        "price": 20,
+        "size": "56oz",
+        "spicy": "yes",
+        "favorite": "yes",
+        "description": "The special margarita."
+    },
+    {
+        "id": 5,
+        "name": "Michelada",
+        "photo": "Bar/Michelada.jpeg",
+        "price": 13,
+        "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "Corona with tamarindo."
+    },
+    {
+        "id": 6,
+        "name": "Cheesy Mac & Cheese With a Fruit Cup",
+        "photo": "Bar/Michelada.jpeg",
+        "price": 13,
+        "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+    }
+]

Websites/jefes-nextjs/app/menu/Beverages/page.tsx

@@ -1,9 +1,13 @@
-import React from 'react'
+import React from "react";
+import Menu from "./items.json";
+import MenuCard from "../MenuCard/MenuCard";
 
 const page = () => {
   return (
-    <div>Beverages</div>
+    <main>
-  )
+      <MenuCard Menu={Menu} />
-}
+    </main>
+  );
+};
 
-export default page
+export default page;

Websites/jefes-nextjs/app/menu/Brunch/items.json

@@ -0,0 +1,62 @@
+[
+    {
+        "id": 1,
+        "name": "Caguamas",
+        "photo": "Bar/32ozCaguamas.jpeg",
+        "price": 14,
+        "size": "32oz",
+        "spicy": "no",
+        "favorite": "no",
+        "description": "A drink."
+    },
+    {
+        "id": 2,
+        "name": "Jefes Tower",
+        "photo": "Bar/100ozTower.jpeg",
+        "price": 35,
+        "size": "100oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "A tower full of Corona."
+    },
+    {
+        "id": 3,
+        "name": "Chambong",
+        "photo": "Bar/chambong.jpeg",
+        "price": 18,
+        "size": "36oz",
+        "spicy": "no",
+        "favorite": "yes",
+        "description": "El Chambong."
+    },
+    {
+        "id": 4,
+        "name": "La Mera Mera Margarita",
+        "photo": "Bar/laMeraMera56ozMargarita.jpeg",
+        "price": 20,
+        "size": "56oz",
+        "spicy": "yes",
+        "favorite": "yes",
+        "description": "The special margarita."
+    },
+    {
+        "id": 5,
+        "name": "Michelada",
+        "photo": "Bar/Michelada.jpeg",
+        "price": 13,
+        "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "Corona with tamarindo."
+    },
+    {
+        "id": 6,
+        "name": "Cheesy Mac & Cheese With a Fruit Cup",
+        "photo": "Bar/Michelada.jpeg",
+        "price": 13,
+        "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+    }
+]

Websites/jefes-nextjs/app/menu/Brunch/page.tsx

@@ -1,9 +1,13 @@
-import React from 'react'
+import React from "react";
+import Menu from "./items.json";
+import MenuCard from "../MenuCard/MenuCard";
 
 const page = () => {
   return (
-    <div>Brunch</div>
+    <main>
-  )
+      <MenuCard Menu={Menu} />
-}
+    </main>
+  );
+};
 
-export default page
+export default page;

Websites/jefes-nextjs/app/menu/Dinner/items.json

@@ -0,0 +1,62 @@
+[
+    {
+        "id": 1,
+        "name": "Caguamas",
+        "photo": "Bar/32ozCaguamas.jpeg",
+        "price": 14,
+        "size": "32oz",
+        "spicy": "no",
+        "favorite": "no",
+        "description": "A drink."
+    },
+    {
+        "id": 2,
+        "name": "Jefes Tower",
+        "photo": "Bar/100ozTower.jpeg",
+        "price": 35,
+        "size": "100oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "A tower full of Corona."
+    },
+    {
+        "id": 3,
+        "name": "Chambong",
+        "photo": "Bar/chambong.jpeg",
+        "price": 18,
+        "size": "36oz",
+        "spicy": "no",
+        "favorite": "yes",
+        "description": "El Chambong."
+    },
+    {
+        "id": 4,
+        "name": "La Mera Mera Margarita",
+        "photo": "Bar/laMeraMera56ozMargarita.jpeg",
+        "price": 20,
+        "size": "56oz",
+        "spicy": "yes",
+        "favorite": "yes",
+        "description": "The special margarita."
+    },
+    {
+        "id": 5,
+        "name": "Michelada",
+        "photo": "Bar/Michelada.jpeg",
+        "price": 13,
+        "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "Corona with tamarindo."
+    },
+    {
+        "id": 6,
+        "name": "Cheesy Mac & Cheese With a Fruit Cup",
+        "photo": "Bar/Michelada.jpeg",
+        "price": 13,
+        "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+    }
+]

Websites/jefes-nextjs/app/menu/Dinner/page.tsx

@@ -1,9 +1,13 @@
-import React from 'react'
+import React from "react";
+import Menu from "./items.json";
+import MenuCard from "../MenuCard/MenuCard";
 
 const page = () => {
   return (
-    <div>page</div>
+    <main>
-  )
+      <MenuCard Menu={Menu} />
-}
+    </main>
+  );
+};
 
-export default page
+export default page;

Websites/jefes-nextjs/app/menu/Lunch/items.json

@@ -0,0 +1,62 @@
+[
+    {
+        "id": 1,
+        "name": "Caguamas",
+        "photo": "Bar/32ozCaguamas.jpeg",
+        "price": 14,
+        "size": "32oz",
+        "spicy": "no",
+        "favorite": "no",
+        "description": "A drink."
+    },
+    {
+        "id": 2,
+        "name": "Jefes Tower",
+        "photo": "Bar/100ozTower.jpeg",
+        "price": 35,
+        "size": "100oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "A tower full of Corona."
+    },
+    {
+        "id": 3,
+        "name": "Chambong",
+        "photo": "Bar/chambong.jpeg",
+        "price": 18,
+        "size": "36oz",
+        "spicy": "no",
+        "favorite": "yes",
+        "description": "El Chambong."
+    },
+    {
+        "id": 4,
+        "name": "La Mera Mera Margarita",
+        "photo": "Bar/laMeraMera56ozMargarita.jpeg",
+        "price": 20,
+        "size": "56oz",
+        "spicy": "yes",
+        "favorite": "yes",
+        "description": "The special margarita."
+    },
+    {
+        "id": 5,
+        "name": "Michelada",
+        "photo": "Bar/Michelada.jpeg",
+        "price": 13,
+        "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "Corona with tamarindo."
+    },
+    {
+        "id": 6,
+        "name": "Cheesy Mac & Cheese With a Fruit Cup",
+        "photo": "Bar/Michelada.jpeg",
+        "price": 13,
+        "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+    }
+]

Websites/jefes-nextjs/app/menu/Lunch/page.tsx

@@ -1,57 +1,14 @@
-import React from 'react'
+import React from "react";
-import Image from 'next/image'
+import Image from "next/image";
+import Menu from "./items.json";
+import MenuCard from "../MenuCard/MenuCard";
 
 const page = () => {
   return (
-    <div>
+    <main>
-      <div className="heading">
+      <MenuCard Menu={Menu} />
-        <h2 className="bev-h2">Quesadillas</h2>
+    </main>
-        <p className="">
+  );
-          Contains bell peppers, tomatoes, onions with a side of guacamole salad
+};
-          upon request. Add rice & beans $2.{" "}
-          <span className="detail">Choose from the following proteins:</span>{" "}
-        </p>
-        <div className="head">
-          <h4>
-            ASADA | CHICKEN | CHORIZO | CARNITAS | AL PASTOR | SHRIMP | FISH |
-            BARBACOA - $11
-          </h4>
-        </div>
-        <div className="decor" aria-hidden="true">
-          <div className="left"></div>
-          <Image
-            src="/gun01.svg"
-            alt="gun icon for decor"
-            className=""
-            width="61"
-            height="101"
-          />
-          <div className="right"></div>
-        </div>
-      </div>
-      <ul className="items items-small">
-        <li className="item">
-          <div className="head">
-            <h4>Grilled Chicken & Bacon Quesadilla</h4>
-            <span>- $10</span>
-          </div>
-        </li>
-        <li className="item">
-          <div className="head">
-            <h4>Quesadilla Del Mar</h4>
-            <span>- $12</span>
-          </div>
-        </li>
-        <li className="item">
-          <div className="head">
-            <h4>Fajita Quesadilla</h4>
-            <span>- $11</span>
-          </div>
-          <p>Chicken or Steak</p>
-        </li>
-      </ul>
-    </div>
-  )
-}
 
-export default page
+export default page;

Websites/jefes-nextjs/app/menu/MenuCard/MenuCard.tsx

@@ -0,0 +1,109 @@
+import * as React from "react";
+import Image from "next/image";
+import localFont from "next/font/local";
+import { Inter } from "next/font/google";
+import { Card } from "@/components/ui/card";
+
+const interBold = localFont({
+  src: "./Inter-Bold.woff",
+  display: "swap",
+});
+const extraBold = localFont({
+  src: "./Inter-ExtraBold.woff",
+  display: "swap",
+});
+const inter = Inter({ subsets: ["latin"] });
+
+const MenuCard = ({ Menu }: any) => {
+  return (
+    <div className="grid desktop:grid-cols-5 tablet:grid-cols-3 md:grid-cols-2 grid-flow-row gap-y-6 md:gap-x-6">
+      {Menu.map((menu_item: any) => {
+        return (
+          <Card
+            key={menu_item.id}
+            className="flex-1 flex-col max-w-[325px] h-[452px] relative"
+          >
+            <div className="w-full h-[55%]">
+              <div className="h-full relative w-full">
+                <Image
+                  src={`/${menu_item.photo}`}
+                  alt="chili pepper spice"
+                  fill
+                  style={{ objectFit: "cover", objectPosition: "center" }}
+                  quality={100}
+                  className="rounded-t-lg"
+                />
+              </div>
+            </div>
+            <div className="m-[8px] space-y-[4px]">
+              {/* title and description of item  */}
+              <div className="flex flex-col w-full font-sans">
+                {/* title and photo */}
+                <div className="inline-block">
+                  <h4
+                    className={`pt-2 float-left ${extraBold.className} flex-wrap w-3/4`}
+                  >
+                    <strong>{menu_item.name}</strong>
+                  </h4>
+                  <div className="right-4 absolute h-[25px] flex flex-row w-1/4 mt-2">
+                    {menu_item.spicy === "yes" ? (
+                      <Image
+                        src="/red-chili-pepper.svg"
+                        alt="chili pepper spice"
+                        fill
+                        style={{
+                          objectFit: "contain",
+                          objectPosition: "left",
+                        }}
+                        quality={100}
+                        className="flex"
+                      />
+                    ) : (
+                      <div className="hidden"></div>
+                    )}
+                    {menu_item.favorite === "yes" ? (
+                      <Image
+                        src="/star.svg"
+                        alt="chili pepper spice"
+                        fill
+                        style={{
+                          objectFit: "contain",
+                          objectPosition: "right",
+                        }}
+                        quality={100}
+                        className="flex"
+                      />
+                    ) : (
+                      <div className="hidden"></div>
+                    )}
+                  </div>
+                </div>
+                {/* description text */}
+                <div className="inline-block text-left pt-2">
+                  <p
+                    className={`max-w-[75ch] ${inter.className} leading-tight font-[12px] text-gray-400 `}
+                  >
+                    {menu_item.description}
+                  </p>
+                </div>
+              </div>
+            </div>
+            {/* cart addon */}
+            <div className="flex flex-row bottom-0 absolute m-2">
+              <div className="flex flex-row">
+                <strong>{`$${menu_item.price}`}</strong>
+              </div>
+              <div className="flex  w-1/2 relative">
+                <div className="flex  w-3 h-full items-end justify-end">
+                  <div className=""></div>
+                </div>
+              </div>
+            </div>
+          </Card>
+        );
+      })}
+    </div>
+  );
+};
+
+export default MenuCard;

Websites/jefes-nextjs/app/menu/Seafood/page.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const page = () => {
-  return (
-    <div>page</div>
-  )
-}
-
-export default page

Websites/jefes-nextjs/app/menu/Sides/items.json

@@ -0,0 +1,62 @@
+[
+    {
+        "id": 1,
+        "name": "Caguamas",
+        "photo": "Bar/32ozCaguamas.jpeg",
+        "price": 14,
+        "size": "32oz",
+        "spicy": "no",
+        "favorite": "no",
+        "description": "A drink."
+    },
+    {
+        "id": 2,
+        "name": "Jefes Tower",
+        "photo": "Bar/100ozTower.jpeg",
+        "price": 35,
+        "size": "100oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "A tower full of Corona."
+    },
+    {
+        "id": 3,
+        "name": "Chambong",
+        "photo": "Bar/chambong.jpeg",
+        "price": 18,
+        "size": "36oz",
+        "spicy": "no",
+        "favorite": "yes",
+        "description": "El Chambong."
+    },
+    {
+        "id": 4,
+        "name": "La Mera Mera Margarita",
+        "photo": "Bar/laMeraMera56ozMargarita.jpeg",
+        "price": 20,
+        "size": "56oz",
+        "spicy": "yes",
+        "favorite": "yes",
+        "description": "The special margarita."
+    },
+    {
+        "id": 5,
+        "name": "Michelada",
+        "photo": "Bar/Michelada.jpeg",
+        "price": 13,
+        "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "Corona with tamarindo."
+    },
+    {
+        "id": 6,
+        "name": "Cheesy Mac & Cheese With a Fruit Cup",
+        "photo": "Bar/Michelada.jpeg",
+        "price": 13,
+        "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+    }
+]

Websites/jefes-nextjs/app/menu/Sides/page.tsx

@@ -1,9 +1,13 @@
-import React from 'react'
+import React from "react";
+import Menu from "./items.json";
+import MenuCard from "../MenuCard/MenuCard";
 
 const page = () => {
   return (
-    <div>page</div>
+    <main>
-  )
+      <MenuCard Menu={Menu} />
-}
+    </main>
+  );
+};
 
-export default page
+export default page;

Websites/jefes-nextjs/app/menu/layout.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import Image from "next/image";
 import MenuLinks from "../components/MenuBar/MenuLinks";
+import { cn } from "../../../nextjs-dashboard/lib/utils";
 
 const layout = ({ children }: { children: React.ReactNode }) => {
   return (
@@ -26,7 +27,42 @@ const layout = ({ children }: { children: React.ReactNode }) => {
       <div className="flex flex-row justify-evenly pt-4">
         <MenuLinks />
       </div>
-      <div className="flex-grow w-full h-full p-6 md:overflow-y-auto md:p-12">{children}</div>
+      <div className="flex flex-row items-center justify-evenly text-xl relative font-normal mt-4">
+        <span className="grid grid-rows-1 grid-cols-2">
+          Spicy-
+          <div className="relative w-1/2">
+            <Image
+              src="/red-chili-pepper.svg"
+              alt="chili pepper spice"
+              fill
+              style={{
+                objectFit: "contain",
+              }}
+              quality={100}
+              className=""
+            />
+          </div>
+        </span>
+        <span className="grid grid-cols-2">
+          Favorite-
+          <div className="relative w-1/3">
+            <Image
+              src="/star.svg"
+              alt="chili pepper spice"
+              fill
+              style={{
+                objectFit: "contain",
+              }}
+              quality={100}
+              className=""
+            />
+          </div>
+        </span>
+      </div>
+
+      <div className="flex-grow w-full h-full p-6 md:overflow-y-auto md:px-14">
+        {children}
+      </div>
     </div>
   );
 };