diff --git a/app/category-page/[categoryId]/products/[productId]/ProductDetailDisplay.tsx b/app/category-page/[categoryId]/products/[productId]/ProductDetailDisplay.tsx index 54fd4d07..43e45b59 100644 --- a/app/category-page/[categoryId]/products/[productId]/ProductDetailDisplay.tsx +++ b/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, diff --git a/app/favicon.ico b/app/favicon.ico deleted file mode 100644 index 718d6fea..00000000 Binary files a/app/favicon.ico and /dev/null differ diff --git a/app/icon.png b/app/icon.png new file mode 100644 index 00000000..f789232a Binary files /dev/null and b/app/icon.png differ diff --git a/app/logo.png b/app/logo.png index 43c77288..52b104cc 100644 Binary files a/app/logo.png and b/app/logo.png differ diff --git a/app/page.tsx b/app/page.tsx index eca651f2..49a49e40 100644 --- a/app/page.tsx +++ b/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 ( - + logo - + Belinda's Closet - - + + {/* download mobile app link */} - - - {categories.map((category, index)=>( - - - - - - ))} - - + + {categories.map((category, index) => ( + + + + + + ))} + + ); }; -export default Home; \ No newline at end of file +export default Home; diff --git a/components/CategoryImages.tsx b/components/CategoryImages.tsx new file mode 100644 index 00000000..965b585d --- /dev/null +++ b/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 ( + {alt} + ); +} + +// CategoryImages component +export function CategoryImages() { + return ( +
+ {categories.map((category, index) => ( + + ))} +
+ ); +} diff --git a/components/CustomCardContent.tsx b/components/CustomCardContent.tsx index 907ad82e..fdecf66f 100644 --- a/components/CustomCardContent.tsx +++ b/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 =({title, image})=>{ - const router = useRouter(); - const navigate=()=>{ - const encodedCategoryId = encodeURIComponent(title); //sanitize item name for route - router.push(`/category-page/${encodedCategoryId}`); - } - return ( - navigate()}> - - logo - - {title} - - - - ) -} +const CustomCardContent: React.FC = ({ id, title, alt }) => { +const router = useRouter(); +const navigate = () => { + const encodedCategoryId = encodeURIComponent(title); //sanitize item name for route + router.push(`/category-page/${encodedCategoryId}`); +}; +return ( + navigate()}> + + + + {title} + + + +); +}; -export default CustomCardContent; \ No newline at end of file +export default CustomCardContent; diff --git a/components/Navbar.tsx b/components/Navbar.tsx index f9e9c850..8d4fb271 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -52,7 +52,7 @@ export default function Navbar() { @@ -122,7 +122,7 @@ export default function Navbar() { diff --git a/public/categories-images/accessories.png b/public/categories-images/accessories.png new file mode 100644 index 00000000..a4911af2 Binary files /dev/null and b/public/categories-images/accessories.png differ diff --git a/public/categories-images/casual.png b/public/categories-images/casual.png new file mode 100644 index 00000000..0109f998 Binary files /dev/null and b/public/categories-images/casual.png differ diff --git a/public/categories-images/dress.png b/public/categories-images/dress.png new file mode 100644 index 00000000..bf3fb7de Binary files /dev/null and b/public/categories-images/dress.png differ diff --git a/public/categories-images/jacket.png b/public/categories-images/jacket.png new file mode 100644 index 00000000..4c5b05c9 Binary files /dev/null and b/public/categories-images/jacket.png differ diff --git a/public/categories-images/pants.png b/public/categories-images/pants.png new file mode 100644 index 00000000..0eb591c0 Binary files /dev/null and b/public/categories-images/pants.png differ diff --git a/public/categories-images/shirt.png b/public/categories-images/shirt.png new file mode 100644 index 00000000..1e7cbb0b Binary files /dev/null and b/public/categories-images/shirt.png differ diff --git a/public/categories-images/shoe.png b/public/categories-images/shoe.png new file mode 100644 index 00000000..3878a3dc Binary files /dev/null and b/public/categories-images/shoe.png differ diff --git a/public/categories-images/skirt.png b/public/categories-images/skirt.png new file mode 100644 index 00000000..c182dcac Binary files /dev/null and b/public/categories-images/skirt.png differ diff --git a/public/categories-images/suit.png b/public/categories-images/suit.png new file mode 100644 index 00000000..ab4fb25d Binary files /dev/null and b/public/categories-images/suit.png differ