From eb1a21828aa139686df6fe1c853fca9a737f5fe2 Mon Sep 17 00:00:00 2001
From: ImAlpha <arcticjcb@gmail.com>
Date: Thu, 21 Nov 2024 22:43:14 -0800
Subject: [PATCH] working api with external url

---
 frontend/src/app/products/page.tsx            |  2 +-
 .../src/components/ui/MenuCard/MenuCard.tsx   | 45 ++++---------------
 2 files changed, 9 insertions(+), 38 deletions(-)

diff --git a/frontend/src/app/products/page.tsx b/frontend/src/app/products/page.tsx
index 1ffff8c..5d551f7 100644
--- a/frontend/src/app/products/page.tsx
+++ b/frontend/src/app/products/page.tsx
@@ -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>
diff --git a/frontend/src/components/ui/MenuCard/MenuCard.tsx b/frontend/src/components/ui/MenuCard/MenuCard.tsx
index 3884071..1bb5acd 100644
--- a/frontend/src/components/ui/MenuCard/MenuCard.tsx
+++ b/frontend/src/components/ui/MenuCard/MenuCard.tsx
@@ -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>