add belinda's design images (#412)

app/category-page/[categoryId]/products/[productId]/ProductDetailDisplay.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Image from "next/image";
-import logo from "app/logo.png";
+import logo from "@/app/logo.png";
 import {
   Box,
   Button,

app/page.tsx

@@ -1,57 +1,57 @@
-'use client';
+"use client";
 import React from "react";
 import Image from "next/image";
 import logo from "./logo.png";
 import google_play from "./google_play.png";
 import CustomCardContent from "@/components/CustomCardContent";
-import Grid from '@mui/material/Unstable_Grid2';
-import Stack from '@mui/material/Stack';
-import Card from '@mui/material/Card';
-import { Container, Typography, Button } from '@mui/material';
-import WrapperDiv from '../components/WrapperDiv'
-
+import Grid from "@mui/material/Unstable_Grid2";
+import Stack from "@mui/material/Stack";
+import Card from "@mui/material/Card";
+import { Container, Typography, Button } from "@mui/material";
+import WrapperDiv from "../components/WrapperDiv";
+import { categories } from "@/components/CategoryImages";
 // TEMPORARY CATEGORIES LIST
-const placeholderImg = logo;
-const categories = [
-  {'type': 'Shirts', 'image': placeholderImg},
-  {'type': 'Shoes', 'image': placeholderImg},
-  {'type': 'Pants', 'image': placeholderImg},
-  {'type': 'Skirts', 'image': placeholderImg},
-  {'type': 'Suits', 'image': placeholderImg},
-  {'type': 'Dress', 'image': placeholderImg},
-  {'type': 'Casual Wear', 'image': placeholderImg},
-  {'type': 'Accessories', 'image': placeholderImg},
-  {'type': 'Jacket/Blazer', 'image': placeholderImg},
-]
-
 const Home = () => {
   return (
     <WrapperDiv>
-      <Container disableGutters fixed maxWidth="xs" sx={{width: "15%"}}>
+      <Container disableGutters fixed maxWidth="xs" sx={{ width: "15%" }}>
         <Image src={logo} alt="logo" width={100} />
       </Container>
-      <Typography component='h1' variant='h3'>
+      <Typography component="h1" variant="h3">
         Belinda&apos;s Closet
       </Typography>
       <Stack direction="row" spacing={2}>
-        <Button href="/auth/sign-in" component='a' variant="contained">Sign In</Button>
-        <Button href="/auth/sign-up" component='a' variant="contained">Sign Up</Button>
+        <Button href="/auth/sign-in" component="a" variant="contained">
+          Sign In
+        </Button>
+        <Button href="/auth/sign-up" component="a" variant="contained">
+          Sign Up
+        </Button>
       </Stack>
       {/* download mobile app link */}
-      <Button component='a' href="" variant="outlined" startIcon={<Image src={google_play} alt="google_play" />}>
+      <Button
+        component="a"
+        href=""
+        variant="outlined"
+        startIcon={<Image src={google_play} alt="google_play" />}
+      >
         Download App
       </Button>
-        <Grid container spacing={2}>
-            {categories.map((category, index)=>(
-              <Grid xs={12} md={6} lg={4} component="div" key={index}>
-                <Card>
-                  <CustomCardContent title={category.type} image={placeholderImg} />
-                </Card>
-              </Grid>
-            ))}
-        </Grid>
-      </WrapperDiv>
+      <Grid container spacing={2}>
+        {categories.map((category, index) => (
+          <Grid xs={12} md={6} lg={4} component="div" key={index}>
+            <Card>
+              <CustomCardContent
+                id={category.id}
+                title={category.title}
+                alt={category.alt}
+              />
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+    </WrapperDiv>
   );
 };
 
-export default Home;
+export default Home;

components/CategoryImages.tsx

@@ -0,0 +1,51 @@
+import Image from "next/image";
+
+// Categories list
+export const categories = [
+  { id: "shirt", title: "Shirts", alt: "Shirt category image" },
+  { id: "shoe", title: "Shoes", alt: "Shoe category image" },
+  { id: "pants", title: "Pants", alt: "Pants category image" },
+  { id: "skirt", title: "Skirts", alt: "Skirt category image" },
+  { id: "suit", title: "Suits", alt: "Suit category image" },
+  { id: "dress", title: "Dress", alt: "Dress category image" },
+  { id: "casual", title: "Casual Wear", alt: "Casual Wear category image" },
+  { id: "accessories", title: "Accessories", alt: "Accessories category image" },
+  { id: "jacket", title: "Jacket/Blazer", alt: "Jacket/Blazer category image" },
+];
+
+// Category component
+export function Category({
+  id,
+  title,
+  alt,
+}: {
+  id: string;
+  title: string;
+  alt: string;
+}) {
+  return (
+    <Image
+      src={`/categories-images/${id}.png`}
+      title={title}
+      alt={alt}
+      width={100}
+      height={100}
+    />
+  );
+}
+
+// CategoryImages component
+export function CategoryImages() {
+  return (
+    <div>
+      {categories.map((category, index) => (
+        <Category
+          key={index}
+          id={category.id}
+          title={category.title}
+          alt={category.alt}
+        />
+      ))}
+    </div>
+  );
+}

components/CustomCardContent.tsx

@@ -1,31 +1,31 @@
-import Image, { StaticImageData } from "next/image";
 import React from "react";
-import { CardActionArea, Typography } from '@mui/material';
+import { CardActionArea, Typography } from "@mui/material";
 import { useRouter } from "next/navigation";
-import CardContent from '@mui/material/CardContent';
+import CardContent from "@mui/material/CardContent";
+import { Category } from "./CategoryImages";
 
-// TODO: CHANGE types to match final DB
 type CategoryCardProps = {
-    title: string;
-    image: StaticImageData;
+  id: string;
+  title: string;
+  alt: string;
 };
 
-const CustomCardContent: React.FC<CategoryCardProps> =({title, image})=>{
-    const router = useRouter();
-    const navigate=()=>{
-        const encodedCategoryId = encodeURIComponent(title); //sanitize item name for route
-        router.push(`/category-page/${encodedCategoryId}`);
-    }
-    return (
-        <CardActionArea onClick={() => navigate()}>
-            <CardContent>
-                <Image src={image} alt="logo" width={100} />
-                <Typography variant='h5' align='center' gutterBottom>
-                    {title}
-                </Typography>
-            </CardContent>
-        </CardActionArea>
-    )
-}
+const CustomCardContent: React.FC<CategoryCardProps> = ({ id, title, alt }) => {
+const router = useRouter();
+const navigate = () => {
+    const encodedCategoryId = encodeURIComponent(title); //sanitize item name for route
+    router.push(`/category-page/${encodedCategoryId}`);
+};
+return (
+    <CardActionArea onClick={() => navigate()}>
+        <CardContent>
+            <Category id={id} title={title} alt={alt} />
+            <Typography variant="h5" align="center" gutterBottom>
+                {title}
+            </Typography>
+        </CardContent>
+    </CardActionArea>
+);
+};
 
-export default CustomCardContent;
+export default CustomCardContent;

components/Navbar.tsx

@@ -52,7 +52,7 @@ export default function Navbar() {
     <Box sx={{ textAlign: "center" }}>
       <Link href="/" passHref>
         <Button color="secondary">
-          <Image src={logo} alt="logo" width={50} height={50} />
+          <Image src={logo} alt="logo" width={70} height={50} />
         </Button>
       </Link>
       <Divider />
@@ -122,7 +122,7 @@ export default function Navbar() {
           <Box sx={{ flexGrow: 1 }}>
             <Link href="/" passHref>
               <Button color="secondary">
-                <Image src={logo} alt="logo" width={50} height={50} />
+                <Image src={logo} alt="logo" width={70} height={50}/>
               </Button>
             </Link>
           </Box>