belinda-nextjs-chore-432-refactor-product-card (#433)

* refactor product card * reverted back to column for responsive
SeattleColleges · Jun 7, 2024 · 5385c70 · 5385c70
1 parent 0ed3711
commit 5385c70
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 18 deletions.
diff --git 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
@@ -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,26 +130,30 @@ 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>
           </Grid>
         </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 />}