From 4d1480289d26a57c45e1d0c4ed7181e2ff13fd68 Mon Sep 17 00:00:00 2001 From: Nickolas <91910852+nickolasram@users.noreply.github.com> Date: Wed, 14 Feb 2024 14:47:32 -0800 Subject: [PATCH] updated main content to MUI (#213) --- app/home.module.css | 4 +- app/page.tsx | 65 ++++++++---------- components/CategoryCard.tsx | 24 ------- components/CustomCardContent.tsx | 31 +++++++++ package-lock.json | 110 +++++++++++++++---------------- package.json | 2 +- 6 files changed, 118 insertions(+), 118 deletions(-) delete mode 100644 components/CategoryCard.tsx create mode 100644 components/CustomCardContent.tsx diff --git a/app/home.module.css b/app/home.module.css index 117b3009..aa855e7e 100644 --- a/app/home.module.css +++ b/app/home.module.css @@ -122,7 +122,7 @@ .categoryContainer{ display: flex; flex-wrap: wrap; - gap: 1.5rem; + gap: 5%; justify-content: flex-start; - padding-inline-start: 7rem; + /* padding-inline-start: 2rem; */ } \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index cb19d569..1461cdef 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -4,8 +4,12 @@ import styles from "./home.module.css"; import Image from "next/image"; import logo from "./logo.png"; import google_play from "./google_play.png"; -import CategoryCard from "@/components/CategoryCard"; -import { useRouter } from "next/navigation"; +import CustomCardContent from "@/components/CustomCardContent"; +import Grid from '@mui/material/Unstable_Grid2'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import Card from '@mui/material/Card'; +import { Container, Typography, Link, Button } from '@mui/material'; // TEMPORARY CATEGORIES LIST const placeholderImg = google_play @@ -21,45 +25,34 @@ const categories = [ {'type': 'Jacket/Blazer', 'image': placeholderImg}, ] - const Home = () => { - const router = useRouter(); - const onCardClick=(type: string)=>{ - const encodedCategoryId = encodeURIComponent(type); //sanitize item name for route - router.push(`/category-page/${encodedCategoryId}`); - } return (
-
-
+ + logo -
-

Welcome to Belinda's Closet

-
- - - - - - -
+ + + Belinda's Closet + + + + + {/* download mobile app link */} -
-

- - - -

-
-
- {categories.map((category, index)=>( - onCardClick(category.type)} key={category.type}/> - ))} -
-
+ + + {categories.map((category, index)=>( + + + + + + ))} + +
); }; diff --git a/components/CategoryCard.tsx b/components/CategoryCard.tsx deleted file mode 100644 index 4d8ee2f2..00000000 --- a/components/CategoryCard.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { StaticImageData } from "next/image"; -import React from "react"; -import {useNavigate} from 'react-router-dom'; -import Image from "next/image"; - -// TODO: CHANGE types to match final DB -type CategoryCardProps = { - title: string; - image: StaticImageData; - onCardClick: ()=>void; -}; - -const CategoryCard: React.FC =({title, image, onCardClick})=>{ - return ( -
- {title+" -
-

{title}

-
-
- ) -} - -export default CategoryCard; \ No newline at end of file diff --git a/components/CustomCardContent.tsx b/components/CustomCardContent.tsx new file mode 100644 index 00000000..5722b658 --- /dev/null +++ b/components/CustomCardContent.tsx @@ -0,0 +1,31 @@ +import Image, { StaticImageData } from "next/image"; +import React from "react"; +import { CardActionArea, Typography, CardHeader } from '@mui/material'; +import { useRouter } from "next/navigation"; +import CardContent from '@mui/material/CardContent'; + +// TODO: CHANGE types to match final DB +type CategoryCardProps = { + title: string; + image: StaticImageData; +}; + +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} + + + + ) +} + +export default CustomCardContent; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 5c09405c..d2547c57 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.15.5", - "@mui/material": "^5.15.5", + "@mui/material": "^5.15.7", "@tanstack/react-query": "5.17.15", "@types/bcrypt": "5.0.0", "@types/node": "20.4.1", @@ -642,9 +642,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.23.8", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.8.tgz", - "integrity": "sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==", + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz", + "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -914,28 +914,28 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz", - "integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz", + "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==", "dependencies": { - "@floating-ui/utils": "^0.2.0" + "@floating-ui/utils": "^0.2.1" } }, "node_modules/@floating-ui/dom": { - "version": "1.5.4", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz", - "integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==", + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.1.tgz", + "integrity": "sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==", "dependencies": { - "@floating-ui/core": "^1.5.3", - "@floating-ui/utils": "^0.2.0" + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.1" } }, "node_modules/@floating-ui/react-dom": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.6.tgz", - "integrity": "sha512-IB8aCRFxr8nFkdYZgH+Otd9EVQPJoynxeFRGTB8voPoZMRWo8XjYuCRgpI1btvuKY69XMiLnW+ym7zoBHM90Rw==", + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz", + "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==", "dependencies": { - "@floating-ui/dom": "^1.5.4" + "@floating-ui/dom": "^1.6.1" }, "peerDependencies": { "react": ">=16.8.0", @@ -1435,14 +1435,14 @@ } }, "node_modules/@mui/base": { - "version": "5.0.0-beta.32", - "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.32.tgz", - "integrity": "sha512-4VptvYeLUYMJhZapWBkD50GmKfOc0XT381KJcTK3ncZYIl8MdBhpR6l8jOyeP5cixUPBJhstjrnmQEAHjCLriw==", + "version": "5.0.0-beta.34", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.34.tgz", + "integrity": "sha512-e2mbTGTtReD/y5RFwnhkl1Tgl3XwgJhY040IlfkTVaU9f5LWrVhEnpRsYXu3B1CtLrwiWs4cu7aMHV9yRd4jpw==", "dependencies": { - "@babel/runtime": "^7.23.8", - "@floating-ui/react-dom": "^2.0.5", + "@babel/runtime": "^7.23.9", + "@floating-ui/react-dom": "^2.0.8", "@mui/types": "^7.2.13", - "@mui/utils": "^5.15.5", + "@mui/utils": "^5.15.7", "@popperjs/core": "^2.11.8", "clsx": "^2.1.0", "prop-types": "^15.8.1" @@ -1466,9 +1466,9 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.15.5", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.5.tgz", - "integrity": "sha512-VhT8klyXy8GrWrARqLMoM6Nzz809Jc3Wn5wd7WOZfre2vFO1rBV1dBANAPBhBqpaQI0HCMRTWEYoSyOFgRnz4A==", + "version": "5.15.8", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.8.tgz", + "integrity": "sha512-W6R1dZJgbYfLmQKf7Es2WUw0pkDkEVUf2jA22DYu0JOa9M3pjvOqoC9HgOPGNNJTu6SCWLSWh3euv1Jn2NmeQA==", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" @@ -1500,16 +1500,16 @@ } }, "node_modules/@mui/material": { - "version": "5.15.5", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.5.tgz", - "integrity": "sha512-2KfA39f/UWeQl0O22UJs3x1nG3chYlyu9wnux5vTnxUTLzkgYIzQIHaH+ZOGpv5JiZBMKktAPNfhqyhSaQ49qQ==", - "dependencies": { - "@babel/runtime": "^7.23.8", - "@mui/base": "5.0.0-beta.32", - "@mui/core-downloads-tracker": "^5.15.5", - "@mui/system": "^5.15.5", + "version": "5.15.7", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.7.tgz", + "integrity": "sha512-l6+AiKZH3iOJmZCnlpel8ghYQe9Lq0BEuKP8fGj3g5xz4arO9GydqYAtLPMvuHKtArj8lJGNuT2yHYxmejincA==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/base": "5.0.0-beta.34", + "@mui/core-downloads-tracker": "^5.15.7", + "@mui/system": "^5.15.7", "@mui/types": "^7.2.13", - "@mui/utils": "^5.15.5", + "@mui/utils": "^5.15.7", "@types/react-transition-group": "^4.4.10", "clsx": "^2.1.0", "csstype": "^3.1.2", @@ -1544,12 +1544,12 @@ } }, "node_modules/@mui/private-theming": { - "version": "5.15.5", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.5.tgz", - "integrity": "sha512-HU1KCyGNcJFsUamTbOM539ZDZJNI/XU7sZFdsN29glktUf+T6hNvDuO2ISinBiLTZy7Ab3R6DSSoYXRrLc4uwQ==", + "version": "5.15.8", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.8.tgz", + "integrity": "sha512-HMDPO416iMZPqs8nGUL3GJMDNpJtE1Uefw/Aw+zTKJHX5JnT+Bms41e2065BUT/zR5dYcKjFP4gQMwW5QX7nvA==", "dependencies": { - "@babel/runtime": "^7.23.8", - "@mui/utils": "^5.15.5", + "@babel/runtime": "^7.23.9", + "@mui/utils": "^5.15.8", "prop-types": "^15.8.1" }, "engines": { @@ -1570,11 +1570,11 @@ } }, "node_modules/@mui/styled-engine": { - "version": "5.15.5", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.5.tgz", - "integrity": "sha512-xoMUd8h270thNL7ZsOzmlluIAMsQg/HT7SCdRjPBVle+XHgTKaiWiRy1ekDOsrrF0rhjME3T7xeeUq2G269UUw==", + "version": "5.15.8", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.8.tgz", + "integrity": "sha512-31ZKPGsS0OiSwuzi8RWoTiWRdUWXPRiOQkyG9bRYX/zvoYeBXEdbsLEgbryug5mVRsPpvwbH5q/i/t6MkjQ71g==", "dependencies": { - "@babel/runtime": "^7.23.8", + "@babel/runtime": "^7.23.9", "@emotion/cache": "^11.11.0", "csstype": "^3.1.2", "prop-types": "^15.8.1" @@ -1601,15 +1601,15 @@ } }, "node_modules/@mui/system": { - "version": "5.15.5", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.5.tgz", - "integrity": "sha512-DMv2vGjUKaDt/m0RlzvLjpKiS5V0LoBhiMUHf5pWdj6uoNlN4FuKUe4pFeYmQMIO5DnVZKybmpPepfkdfEH+Og==", + "version": "5.15.8", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.8.tgz", + "integrity": "sha512-BUMJvlz1UqIqDPyrvc+MwjOUkWKskUPAOUuRh2KMAworiXuuUmtIivxSfdGll2ex6RHSylu4yc5dJZByOI8EcQ==", "dependencies": { - "@babel/runtime": "^7.23.8", - "@mui/private-theming": "^5.15.5", - "@mui/styled-engine": "^5.15.5", + "@babel/runtime": "^7.23.9", + "@mui/private-theming": "^5.15.8", + "@mui/styled-engine": "^5.15.8", "@mui/types": "^7.2.13", - "@mui/utils": "^5.15.5", + "@mui/utils": "^5.15.8", "clsx": "^2.1.0", "csstype": "^3.1.2", "prop-types": "^15.8.1" @@ -1653,11 +1653,11 @@ } }, "node_modules/@mui/utils": { - "version": "5.15.5", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.5.tgz", - "integrity": "sha512-jEywgaMGZWPSlVFO7ZZAyXxNeLmq5XBp5At9Ne/sGohRJdesUcdxvyi8TP3odJxwQuL5L6PJV+JQ4DyIDM849A==", + "version": "5.15.8", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.8.tgz", + "integrity": "sha512-Q6Z/xSxi1Z6xQ5Qj9p4ZTHudwfrrwFALtU6H1O222pXudg9Qm0zHdiwJQiHT9L6jMIN78ZujEfGHserMoHUrQw==", "dependencies": { - "@babel/runtime": "^7.23.8", + "@babel/runtime": "^7.23.9", "@types/prop-types": "^15.7.11", "prop-types": "^15.8.1", "react-is": "^18.2.0" diff --git a/package.json b/package.json index 8dc3f5f3..6b9ee14e 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.15.5", - "@mui/material": "^5.15.5", + "@mui/material": "^5.15.7", "@tanstack/react-query": "5.17.15", "@types/bcrypt": "5.0.0", "@types/node": "20.4.1",