Turned menu into component for reusability
This commit is contained in:
parent
c111271fe8
commit
158957de49
@ -6,6 +6,7 @@
|
||||
"price_large": 7,
|
||||
"price_small": 5,
|
||||
"spicy": "no",
|
||||
"favorite": "yes",
|
||||
"description": "avocado dripppppp"
|
||||
},
|
||||
{
|
||||
|
||||
@ -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">
|
||||
<div className="text-4xl flex flex-row text-black antialiased font-bold items-center justify-center">
|
||||
<Image
|
||||
src="/gun01.svg"
|
||||
alt="gun icon for decor"
|
||||
className="rotate-45"
|
||||
width={70}
|
||||
height={50}
|
||||
/>
|
||||
<div className="">Appetizers</div>
|
||||
<Image
|
||||
src="/gun01.svg"
|
||||
alt="gun icon for decor"
|
||||
className="gun_menu gun_rotate"
|
||||
width={70}
|
||||
height={50}
|
||||
/>
|
||||
</div>
|
||||
{/* Mapping out the menu */}
|
||||
<div className=" flex flex-wrap gap-8 pt-6 justify-between w-full">
|
||||
{Menu.map((menu_item) => {
|
||||
return (
|
||||
<div
|
||||
key={menu_item.id}
|
||||
className="flex flex-col flex-grow bg-blue-300 h-[452px] w-[325px] rounded-lg shadow-xl drop-shadow-xl"
|
||||
>
|
||||
<div className="h-[55%] relative w-full overflow-hidden">
|
||||
<Image
|
||||
src={`/${menu_item.photo}`}
|
||||
alt="chili pepper spice"
|
||||
fill
|
||||
style={{ objectFit: "cover", objectPosition: "center" }}
|
||||
quality={100}
|
||||
className="rounded-t-lg"
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
<main>
|
||||
<MenuCard Menu={Menu} />
|
||||
{/* <div className="flex flex-col w-full">
|
||||
<div className="text-4xl flex flex-row text-black antialiased font-bold items-center justify-center">
|
||||
<Image
|
||||
src="/gun01.svg"
|
||||
alt="gun icon for decor"
|
||||
className="rotate-45"
|
||||
width={70}
|
||||
height={50}
|
||||
/>
|
||||
<div className="">Appetizers</div>
|
||||
<Image
|
||||
src="/gun01.svg"
|
||||
alt="gun icon for decor"
|
||||
className="gun_menu gun_rotate"
|
||||
width={70}
|
||||
height={50}
|
||||
/>
|
||||
</div> */}
|
||||
{/* Mapping out the menu */}
|
||||
{/* <div className=" flex flex-wrap gap-8 pt-6 justify-between w-full">
|
||||
{Menu.map((menu_item) => {
|
||||
return (
|
||||
<div
|
||||
key={menu_item.id}
|
||||
className="flex flex-col flex-grow bg-blue-300 h-[452px] w-[325px] rounded-lg shadow-xl drop-shadow-xl"
|
||||
>
|
||||
<div className="h-[55%] relative w-full overflow-hidden">
|
||||
<Image
|
||||
src={`/${menu_item.photo}`}
|
||||
alt="chili pepper spice"
|
||||
fill
|
||||
style={{ objectFit: "cover", objectPosition: "center" }}
|
||||
quality={100}
|
||||
className="rounded-t-lg"
|
||||
/>
|
||||
</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="">
|
||||
|
||||
<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">
|
||||
<div className="flex bg-blue-600 w-3 h-full items-end justify-end">
|
||||
<div className=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* <div className="col-span-2 gap-6 bg-green-400">
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div> */}
|
||||
{/* <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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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."
|
||||
}
|
||||
]
|
||||
@ -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";
|
||||
|
||||
const interBold = localFont({
|
||||
src: "./Inter-Bold.woff",
|
||||
display: "swap",
|
||||
});
|
||||
const extraBold = localFont({
|
||||
src: "./Inter-ExtraBold.woff",
|
||||
display: "swap",
|
||||
});
|
||||
import MenuCard from "../MenuCard/MenuCard";
|
||||
|
||||
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">
|
||||
{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>
|
||||
<MenuCard Menu={Menu} />
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
62
Websites/jefes-nextjs/app/menu/Beverages/items.json
Normal file
62
Websites/jefes-nextjs/app/menu/Beverages/items.json
Normal file
@ -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."
|
||||
}
|
||||
]
|
||||
@ -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;
|
||||
|
||||
62
Websites/jefes-nextjs/app/menu/Brunch/items.json
Normal file
62
Websites/jefes-nextjs/app/menu/Brunch/items.json
Normal file
@ -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."
|
||||
}
|
||||
]
|
||||
@ -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;
|
||||
|
||||
62
Websites/jefes-nextjs/app/menu/Dinner/items.json
Normal file
62
Websites/jefes-nextjs/app/menu/Dinner/items.json
Normal file
@ -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."
|
||||
}
|
||||
]
|
||||
@ -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;
|
||||
|
||||
62
Websites/jefes-nextjs/app/menu/Lunch/items.json
Normal file
62
Websites/jefes-nextjs/app/menu/Lunch/items.json
Normal file
@ -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."
|
||||
}
|
||||
]
|
||||
@ -1,57 +1,14 @@
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import Menu from "./items.json";
|
||||
import MenuCard from "../MenuCard/MenuCard";
|
||||
|
||||
const page = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="heading">
|
||||
<h2 className="bev-h2">Quesadillas</h2>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
<main>
|
||||
<MenuCard Menu={Menu} />
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default page
|
||||
export default page;
|
||||
|
||||
BIN
Websites/jefes-nextjs/app/menu/MenuCard/Inter-Bold.woff
Normal file
BIN
Websites/jefes-nextjs/app/menu/MenuCard/Inter-Bold.woff
Normal file
Binary file not shown.
BIN
Websites/jefes-nextjs/app/menu/MenuCard/Inter-ExtraBold.woff
Normal file
BIN
Websites/jefes-nextjs/app/menu/MenuCard/Inter-ExtraBold.woff
Normal file
Binary file not shown.
109
Websites/jefes-nextjs/app/menu/MenuCard/MenuCard.tsx
Normal file
109
Websites/jefes-nextjs/app/menu/MenuCard/MenuCard.tsx
Normal file
@ -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;
|
||||
@ -1,9 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const page = () => {
|
||||
return (
|
||||
<div>page</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default page
|
||||
62
Websites/jefes-nextjs/app/menu/Sides/items.json
Normal file
62
Websites/jefes-nextjs/app/menu/Sides/items.json
Normal file
@ -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."
|
||||
}
|
||||
]
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user