This commit is contained in:
ImAlpha 2024-01-25 23:46:27 -08:00
parent 4d76551577
commit c111271fe8

View File

@ -4,16 +4,16 @@ 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 localFont from "next/font/local";
const interBold = localFont({
src: './Inter-Bold.woff',
display: 'swap',
})
src: "./Inter-Bold.woff",
display: "swap",
});
const extraBold = localFont({
src: './Inter-ExtraBold.woff',
display: 'swap',
})
src: "./Inter-ExtraBold.woff",
display: "swap",
});
const Bar = () => {
let pic = "cover";
@ -22,7 +22,10 @@ const Bar = () => {
<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">
<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
@ -58,23 +61,25 @@ const Bar = () => {
</div>
{/* description text */}
<div className="inline-block text-left pt-2">
<p className={`max-w-[75ch] ${interBold.className} leading-tight font-[12px] text-[#D7D7D7]`}>
<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>
{/* 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>
);
})}