93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
"use client";
|
|
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-cols-1 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 overflow-hidden bg-slate-600 border-slate-600"
|
|
>
|
|
<div className="w-full h-[68%]">
|
|
<div className="h-full relative w-full">
|
|
<Image
|
|
src={`/${menu_item.photo}`}
|
|
alt="product photo"
|
|
fill
|
|
style={{ objectFit: "cover", objectPosition: "center" }}
|
|
quality={75}
|
|
sizes="(max-width: 325px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
|
className="flex"
|
|
/>
|
|
</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 text-emerald-500`}
|
|
>
|
|
<strong>{menu_item.name}</strong>
|
|
</h4>
|
|
<div className="right-4 absolute h-[25px] flex flex-row w-1/4 mt-2 text-orange-500">
|
|
{menu_item.inStock === "yes" ? (
|
|
<span>In Stock!</span>
|
|
) : (
|
|
<span>Out of Stock</span>
|
|
)}
|
|
{menu_item.favorite === "yes" ? (
|
|
<Image
|
|
src="/star.svg"
|
|
alt="jefe's star"
|
|
fill
|
|
style={{
|
|
objectFit: "contain",
|
|
objectPosition: "right",
|
|
}}
|
|
quality={100}
|
|
sizes="(max-width: 25px) 100vw, (max-width: 325px) 50vw, 33vw"
|
|
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-blue-400 `}
|
|
>
|
|
{menu_item.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MenuCard;
|