87 lines
3.1 KiB
TypeScript
87 lines
3.1 KiB
TypeScript
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";
|
|
|
|
const Bar = () => {
|
|
return (
|
|
<main>
|
|
{/* 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 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 justify-evenly">
|
|
<div className=" flex flex-row">
|
|
<span>{`$${menu_item.price}`}</span>
|
|
</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>
|
|
</div>
|
|
);
|
|
})}
|
|
</div> */}
|
|
<div>
|
|
{Menu.map((menu_item) => {
|
|
return (
|
|
<Card key={menu_item.id} className="flex flex-wrap gap-8 pt-6 justify-evenly w-[325px] h-[452px]">
|
|
<CardHeader className="h-full 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"
|
|
/>
|
|
</CardHeader>
|
|
<h4 className="">
|
|
<strong>{menu_item.name}</strong>
|
|
</h4>
|
|
<p className="max-w-[75ch]">
|
|
Description: {menu_item.description}
|
|
</p>
|
|
<div className="flex flex-row justify-evenly">
|
|
<div className=" flex flex-row">
|
|
<span>{`$${menu_item.price}`}</span>
|
|
</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>
|
|
);
|
|
};
|
|
|
|
export default Bar;
|