87 lines
3.1 KiB
TypeScript
87 lines
3.1 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 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">
|
|
{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>
|
|
);
|
|
};
|
|
|
|
export default Bar;
|