From 5385c7074f49ffb27b0bc2df9a99caa1b12073f0 Mon Sep 17 00:00:00 2001
From: Tin Pham <72054441+tinpham5614@users.noreply.github.com>
Date: Thu, 6 Jun 2024 22:24:39 -0700
Subject: [PATCH] belinda-nextjs-chore-432-refactor-product-card (#433)

* refactor product card

* reverted back to column for responsive
---
 app/category-page/[categoryId]/page.tsx |  3 +--
 components/ProductCard.tsx              | 34 +++++++++++++------------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/app/category-page/[categoryId]/page.tsx b/app/category-page/[categoryId]/page.tsx
index b14d1a96..9ce33350 100644
--- a/app/category-page/[categoryId]/page.tsx
+++ b/app/category-page/[categoryId]/page.tsx
@@ -76,8 +76,7 @@ const ViewProduct = ({ categoryId }: { categoryId: string }) => {
       </Typography>
       <Grid container spacing={2}>
         {filteredProducts.map((product, index) => (
-          // <Grid item key={index} xs={12} sm={6} md={4}>
-          <Grid item key={index} xs={12} sm={40} md={40}>
+          <Grid item key={index} xs={12} sm={6} md={4}>
             <ProductCard
               image={logo}
               categories={product.productType}
diff --git a/components/ProductCard.tsx b/components/ProductCard.tsx
index 7243376b..3add8cc8 100644
--- a/components/ProductCard.tsx
+++ b/components/ProductCard.tsx
@@ -95,18 +95,17 @@ export default function ProductCard({
         p: 2,
         margin: "auto",
         maxWidth: 500,
-        flexGrow: 1,
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
       }}
     >
       <Grid container spacing={2} justifyContent="center">
         <Grid item>
           <ButtonBase>
             <Link href={href}>
-              <Image
-                src={image}
-                alt="product image"
-                style={{ width: 128, height: 128 }}
-              />
+              <Image src={image} alt="product image" width={128} />
             </Link>
           </ButtonBase>
         </Grid>
@@ -131,7 +130,17 @@ export default function ProductCard({
               <Typography variant="body2" color="text.secondary">
                 {sizePantsInseam}
               </Typography>
-              <Typography variant="body2" gutterBottom>
+              <Typography
+                variant="body2"
+                gutterBottom
+                sx={{
+                  overflow: "hidden", // Hide text that overflows
+                  textOverflow: "ellipsis",
+                  display: "-webkit-box",
+                  WebkitLineClamp: 3, // Limit the number of lines
+                  WebkitBoxOrient: "vertical",
+                }}
+              >
                 {description}
               </Typography>
             </Grid>
@@ -139,18 +148,12 @@ export default function ProductCard({
         </Grid>
       </Grid>
       <Stack direction="column" spacing={2} justifyContent="flex-end" mt={2}>
-        <Button
-          variant="contained"
-          href={href}
-          color="primary"
-          sx={{ minWidth: 30, maxWidth: "215px" }}
-        >
+        <Button variant="contained" href={href} color="primary">
           View
         </Button>
-
+        {/* Only show delete and archive buttons if user is admin or creator */}
         {userRole === "admin" || userRole === "creator" ? (
           <Stack direction="row" spacing={2}>
-            {/* TODO: Add delete function to this button  */}
             <Button
               variant="contained"
               startIcon={<DeleteIcon />}
@@ -160,7 +163,6 @@ export default function ProductCard({
             >
               Delete
             </Button>
-            {/* TODO: Add archive function to this button  */}
             <Button
               variant="contained"
               startIcon={<ArchiveIcon />}