87 lines
3.0 KiB
TypeScript
87 lines
3.0 KiB
TypeScript
"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 Bar = () => {
|
|
let pic = "cover";
|
|
return (
|
|
<main>
|
|
<div className="flex flex-wrap gap-8">
|
|
{Menu.map((menu_item) => {
|
|
return (
|
|
<Card key={menu_item.id} className="flex flex-grow flex-col w-[325px] h-[452px]">
|
|
<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 ${interBold.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>
|
|
{/* paragraph text */}
|
|
<div className="inline-block text-left">
|
|
<p className={`max-w-[75ch] ${interBold.className} font-semibold`}>
|
|
{menu_item.description}
|
|
</p>
|
|
{/* 16px line height */}
|
|
<p className="leading-4 text-[#8F8F8F]">
|
|
{menu_item.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{/* cart addon */}
|
|
<div className="flex flex-row">
|
|
<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>
|
|
</div>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</main>
|
|
);
|
|
};
|
|
|
|
export default Bar;
|