working api with external url
This commit is contained in:
parent
96f1917f8f
commit
eb1a21828a
@ -41,7 +41,7 @@ const Products = () => {
|
||||
|
||||
|
||||
return (
|
||||
<div className="products">
|
||||
<div className="products flex items-center justify-center sm:items-none sm:justify-none">
|
||||
{/* <div className="left">
|
||||
<div className="filterItem">
|
||||
<h2>Product Categories</h2>
|
||||
|
||||
@ -25,14 +25,14 @@ const MenuCard = ({ Menu }: any) => {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<div className="grid qhd:grid-cols-5 desktop:grid-cols-4 tablet:grid-cols-3 md:grid-cols-2 grid-cols-1 grid-flow-row gap-y-6 md:gap-x-6 ">
|
||||
<div className="grid qhd:grid-cols-5 desktop:grid-cols-4 tablet:grid-cols-3 md:grid-cols-2 grid-cols-1 grid-auto-rows-max gap-y-6 md:gap-x-6 justify-center w-full">
|
||||
{Menu.map((menu_item: any) => {
|
||||
return (
|
||||
<Card
|
||||
key={menu_item.id}
|
||||
className="flex-1 flex-col max-w-[325px] h-[400px] relative overflow-hidden bg-white/10 border-none transition hover:z-50 backdrop-blur-xl"
|
||||
className="flex-1 flex-col w-[325px] h-[400px] relative overflow-hidden bg-white/10 border-none transition hover:z-50 backdrop-blur-xl mx-auto"
|
||||
>
|
||||
<div className="w-full h-[75%]">
|
||||
<div className="w-full h-[80%] flex justify-center items-center">
|
||||
<div className="h-full relative w-full">
|
||||
{/* Flask */}
|
||||
{/* <Image
|
||||
@ -58,49 +58,20 @@ const MenuCard = ({ Menu }: any) => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="m-[8px] space-y-[4px]">
|
||||
<div className="mt-[20px] space-y-[4px] bg-black/20 h-full">
|
||||
{/* title and description of item */}
|
||||
<div className="flex flex-col w-full font-sans text-center">
|
||||
<div className="flex flex-col w-full font-sans text-center text-lg">
|
||||
{/* title and photo */}
|
||||
<div className="flex flex-col items-center justify-center text-start">
|
||||
<h4
|
||||
className={`pt-2 float-left ${Popp.className} flex-wrap w-3/4 text-[#EEEEEE]`}
|
||||
>
|
||||
<span>{menu_item.description}</span>
|
||||
<span>{menu_item.title}</span>
|
||||
</h4>
|
||||
<div className="right-2 absolute h-[25px] flex flex-row w-1/4 mt-2 text-[#7B9922]">
|
||||
{menu_item.inStock === "yes" ? (
|
||||
<span>In Stock!</span>
|
||||
) : (
|
||||
<span className="text-orange-600">Out of Stock</span>
|
||||
)}
|
||||
{/* Check if item is a favorite */}
|
||||
{/* {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 className="right-2 absolute h-[25px] flex flex-row w-1/4 mt-2 text-[#7B9922] font-bold">
|
||||
${menu_item.price}
|
||||
</div>
|
||||
</div>
|
||||
{/* description text */}
|
||||
{/* <div className="inline-block text-left pt-2">
|
||||
<p
|
||||
className={`max-w-[75ch] ${Popp.className} leading-tight font-[12px] text-blue-400 `}
|
||||
>
|
||||
{menu_item.description}
|
||||
</p>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user