diff --git a/package-lock.json b/package-lock.json index 1334fa98..0d46594d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,9 @@ "next": "^13.5.4", "react": "^18.2.0", "react-dom": "18.2.0", + "react-feather": "^2.0.10", + "react-router-dom": "^6.17.0", + "react-toastify": "^9.1.3", "styled-components": "^6.0.8" }, "devDependencies": { @@ -1996,9 +1999,9 @@ } }, "node_modules/@babel/traverse": { - "version": "7.23.0", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.0.tgz", - "integrity": "sha512-t/QaEvyIoIkwzpiZ7aoSKK8kObQYeF7T2v+dazAYCb8SXtp58zEVkWW7zAnju8FNKNdr4ScAOEDmMItbyOmEYw==", + "version": "7.23.2", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz", + "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==", "dependencies": { "@babel/code-frame": "^7.22.13", "@babel/generator": "^7.23.0", @@ -2459,6 +2462,14 @@ "node": ">= 8" } }, + "node_modules/@remix-run/router": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.10.0.tgz", + "integrity": "sha512-Lm+fYpMfZoEucJ7cMxgt4dYt8jLfbpwRCzAjm9UgSLOkmlqo9gupxt6YX3DY0Fk155NT9l17d/ydi+964uS9Lw==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz", @@ -3520,6 +3531,14 @@ "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" }, + "node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -5971,11 +5990,64 @@ "react": "^18.2.0" } }, + "node_modules/react-feather": { + "version": "2.0.10", + "resolved": "https://registry.npmjs.org/react-feather/-/react-feather-2.0.10.tgz", + "integrity": "sha512-BLhukwJ+Z92Nmdcs+EMw6dy1Z/VLiJTzEQACDUEnWMClhYnFykJCGWQx+NmwP/qQHGX/5CzQ+TGi8ofg2+HzVQ==", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": ">=16.8.6" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-router": { + "version": "6.17.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.17.0.tgz", + "integrity": "sha512-YJR3OTJzi3zhqeJYADHANCGPUu9J+6fT5GLv82UWRGSxu6oJYCKVmxUcaBQuGm9udpWmPsvpme/CdHumqgsoaA==", + "dependencies": { + "@remix-run/router": "1.10.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.17.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.17.0.tgz", + "integrity": "sha512-qWHkkbXQX+6li0COUUPKAUkxjNNqPJuiBd27dVwQGDNsuFBdMbrS6UZ0CLYc4CsbdLYTckn4oB4tGDuPZpPhaQ==", + "dependencies": { + "@remix-run/router": "1.10.0", + "react-router": "6.17.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, + "node_modules/react-toastify": { + "version": "9.1.3", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz", + "integrity": "sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==", + "dependencies": { + "clsx": "^1.1.1" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, "node_modules/readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", diff --git a/package.json b/package.json index 45bd66d7..d06c700f 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,9 @@ "next": "^13.5.4", "react": "^18.2.0", "react-dom": "18.2.0", + "react-feather": "^2.0.10", + "react-router-dom": "^6.17.0", + "react-toastify": "^9.1.3", "styled-components": "^6.0.8" }, "devDependencies": { diff --git a/src/app/[productId]/Buttons.tsx b/src/app/[productId]/Buttons.tsx index 0099ef9a..d097e1f0 100644 --- a/src/app/[productId]/Buttons.tsx +++ b/src/app/[productId]/Buttons.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { toast } from 'react-toastify'; import { ButtonsWrapper, AddToCartButton, @@ -20,6 +21,8 @@ export default function Buttons() { }; // used hyphen instead of dash for display + const notify = () => toast(`you have added ${quantity} items to the cart!`); + return ( @@ -31,7 +34,8 @@ export default function Buttons() { + - Add to cart + + Add to cart ); } diff --git a/src/app/[productId]/page.tsx b/src/app/[productId]/page.tsx index 143426f2..3a43b3f7 100644 --- a/src/app/[productId]/page.tsx +++ b/src/app/[productId]/page.tsx @@ -4,11 +4,13 @@ import Link from 'next/link'; import Image from 'next/image'; import { useEffect, useState } from 'react'; import { fetchProductByID } from '../../api/supabase/queries/product_queries'; + import { BackButton, ImageContainer, TextContainer, DescriptionContainer, + ToastPopUP, } from './styles'; import { GlobalStyle } from '../../styles/components'; import NavBar from '../../components/NavBar'; @@ -40,7 +42,14 @@ export default function ItemDisplay({ return (
+ + (false); diff --git a/src/app/favorites/page.tsx b/src/app/favorites/page.tsx new file mode 100644 index 00000000..93ae8a1a --- /dev/null +++ b/src/app/favorites/page.tsx @@ -0,0 +1,81 @@ +'use client'; + +import { ArrowLeft } from 'react-feather'; + +import { useRouter } from 'next/navigation'; +import { useState, useEffect } from 'react'; +import { arrayOfFavorites, getUserInfo } from '../storefront/helperFunction'; + +import { + FavoriteDiv, + OutterFavoriteDiv, + BackDiv, + GlobalStyle, + OutterBox, + Backtext, + HeartIcon, + TransparentButton, + NavBarMovedUP, +} from '../profileScreen/style'; + +import NavBar from '../../components/NavBar'; + +interface Product { + description: string; + category: string; + quantity: number; + photo: string; + product_id: number; + name: string; + updated_at: Date; +} + +export default function FavoritesPage() { + const [Favorites, setFavorites] = useState([]); + const router = useRouter(); + async function fetchProducts() { + const data = (await arrayOfFavorites()) as Product[]; + setFavorites(data); + } + useEffect(() => { + fetchProducts(); + }, []); + + async function clickFunctions(props: { fav: Product }) { + const { fav } = props; + getUserInfo(fav, false); + const data = (await arrayOfFavorites()) as Product[]; + setFavorites(data); + } + + return ( +
+ + + + router.push('/profileScreen')}> + + Back + +

Favorites

+ + {Favorites.map(favorite => ( + + {favorite.name} +

{favorite.name}

+ clickFunctions({ fav: favorite })} + > + + + + ))} + + +
+ ); +} diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 66847d53..cfa5bfde 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -1,12 +1,14 @@ 'use client'; import { useState } from 'react'; + +import Image from 'next/image'; + import LoginForm from '../../components/LoginForm'; import { GlobalStyle, Fullscreen, - Img, LoginBox, LoginContent, WelcomeSign, @@ -22,7 +24,12 @@ export default function App() {
- + logo pic Welcome diff --git a/src/app/login/shantiLogo.png b/src/app/login/shantiLogo.png deleted file mode 100644 index dbb060e9..00000000 Binary files a/src/app/login/shantiLogo.png and /dev/null differ diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx index cc0baf8a..34eb9ab3 100644 --- a/src/app/profileScreen/page.tsx +++ b/src/app/profileScreen/page.tsx @@ -1,17 +1,48 @@ 'use client'; -import { LogOutButton, GlobalStyle } from './style'; +import { useRouter } from 'next/navigation'; -import { signOut } from '../../api/supabase/auth/auth'; +import { toast } from 'react-toastify'; import NavBar from '../../components/NavBar'; +import { + LogOutButton, + GlobalStyle, + PopUp, + NavBarZeroIndex, + FooterMoved, +} from './style'; + +import { signOut } from '../../api/supabase/auth/auth'; + +import 'react-toastify/dist/ReactToastify.css'; + +import Footer from '../../components/Footer'; + export default function Profile() { + const router = useRouter(); + + const showToastMessage = () => { + signOut(); + toast("You've been Logged Out! Redirecting...", { + position: toast.POSITION.TOP_CENTER, + }); + setTimeout(() => { + router.push('/login'); + }, 3000); + }; + return (
- + - signOut()}>Sign Out + showToastMessage()}>Log Out! + + router.push('/favorites')}> + Favorites + +
); } diff --git a/src/app/profileScreen/style.ts b/src/app/profileScreen/style.ts index b708c88a..b4821e8a 100644 --- a/src/app/profileScreen/style.ts +++ b/src/app/profileScreen/style.ts @@ -1,8 +1,19 @@ import styled, { createGlobalStyle } from 'styled-components'; +import { ToastContainer } from 'react-toastify'; + +import { Heart } from 'react-feather'; + +import NavBar from '../../components/NavBar'; + +import Footer from '../../components/Footer'; + export const GlobalStyle = createGlobalStyle` body { background:white; + color: black; + overflow: visible; + } `; @@ -19,4 +30,81 @@ export const LogOutButton = styled.button` border-radius: 5px; width: 300px; height: 50px; + z-index: 1000; + transform: translateY(200px); +`; +/* transform: translateY(200px); */ + +export const PopUp = styled(ToastContainer)` + transform: translate(-150px, 250px); + position: fixed; +`; + +export const FavoriteDiv = styled.div` + display: flex; + flex-direction: row; + align-items: start; + justify-content: space-around; + width: 100%; + margin-bottom: 50px; + margin-top: 30px; +`; + +export const OutterFavoriteDiv = styled.div` + display: flex; + flex-direction: column; + align-items: center; + border-radius: 10px; + background: var(--White, #fff); + box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); + width: 800px; + height: 350px; + overflow: scroll; + margin-top: 10px; +`; + +export const BackDiv = styled.button` + display: flex; + flex-direction: row; + align: center; + color: black; + background-color: transparent; + border: transparent; + margin-bottom: 25px; + margin-top: 25px; +`; + +export const OutterBox = styled.div` + width: 900px; + margin-left: 300px; +`; + +export const Backtext = styled.p` + padding-top: 5px; +`; + +export const HeartIcon = styled(Heart)` + color: red; + width: 30px; + height: 30px; + fill: red; +`; + +export const NavBarZeroIndex = styled(NavBar)` + z-index: 0; + position: fixed; + margin-bottom: 100px; +`; + +export const FooterMoved = styled(Footer)` + transform: translateY(300px); +`; + +export const TransparentButton = styled.button` + background-color: transparent; + border: transparent; +`; + +export const NavBarMovedUP = styled(NavBar)` + position: static; `; diff --git a/src/app/storefront/IndividualItem.tsx b/src/app/storefront/IndividualItem.tsx new file mode 100644 index 00000000..727eef2f --- /dev/null +++ b/src/app/storefront/IndividualItem.tsx @@ -0,0 +1,62 @@ +import React, { useState, useEffect } from 'react'; + +import { useRouter } from 'next/navigation'; + +import { + StorefrontItem, + ItemButtons, + HeartIcon, + HeartContainer, +} from './styles'; + +import { getUserInfo, arrayOfFavorites } from './helperFunction'; + +interface Product { + description: string; + category: string; + quantity: number; + photo: string; + product_id: number; + name: string; + updated_at: Date; +} + +export default function IndividualItem(props: { product: Product }) { + const { product } = props; + const [isFavorite, setIsFavorite] = useState(true); + const router = useRouter(); + + useEffect(() => { + async function fetchProducts() { + const data = (await arrayOfFavorites()) as Product[]; + + if (data.find(item => item.product_id === product.product_id)) { + setIsFavorite(false); + } + } + fetchProducts(); + }); + + async function clickFunction() { + setIsFavorite(!isFavorite); + getUserInfo(product, isFavorite); + arrayOfFavorites(); + } + return ( +
+ + router.push(`/${product.product_id}`)}> + {product.name} + + clickFunction()}> + + + +

{product.name}

+
+ ); +} diff --git a/src/app/storefront/helperFunction.jsx b/src/app/storefront/helperFunction.jsx index c5a672ee..f8c5da54 100644 --- a/src/app/storefront/helperFunction.jsx +++ b/src/app/storefront/helperFunction.jsx @@ -18,7 +18,7 @@ const supabase = createClient( export async function getProduct() { const { data } = await supabase.from('product').select('*'); - // console.log(data); + return data; } @@ -27,7 +27,84 @@ export async function filterProduct(productType) { .from('product') .select('*') .eq('category', productType); - // console.log(data); return data; } + +export async function getUserInfo(product, isFav) { + const { + data: { user }, + } = await supabase.auth.getUser(); + + const { data, error } = await supabase + .from('profiles') + .select() + .eq('user_id', user.id); + + const CurrUserFavoriteItems = data[0].fav_items; + + if (isFav) { + CurrUserFavoriteItems[product.product_id] = 1; + } else { + delete CurrUserFavoriteItems[product.product_id]; + } + + const { errors } = await supabase + .from('profiles') + .update({ fav_items: CurrUserFavoriteItems }) + .eq('user_id', user.id); +} + +export async function arrayOfFavorites() { + const { + data: { user }, + } = await supabase.auth.getUser(); + + const { data, error } = await supabase + .from('profiles') + .select() + .eq('user_id', user.id); + + const CurrUserFavoriteItems = data[0].fav_items; + + const Favkey = Object.keys(CurrUserFavoriteItems); + + var FavArray = []; + + for (let i = 0; i < Favkey.length; i++) { + let key = Favkey[i]; + const { data, error } = await supabase + .from('product') + .select() + .eq('product_id', key); + + if (data[0] != undefined) { + FavArray.push(data[0]); + } + } + + return FavArray; +} + +export async function totalNumberOfItemsInCart() { + const { + data: { user }, + } = await supabase.auth.getUser(); + + const { data, error } = await supabase + .from('profiles') + .select() + .eq('user_id', user.id); + + const CurrUserCart = data[0].cart; + + const itemNumb = Object.values(CurrUserCart); + + let sum = 0; + + for (let i = 0; i < itemNumb.length; i++) { + sum = sum + itemNumb[i]; + } + + return sum; +} diff --git a/src/app/storefront/page.tsx b/src/app/storefront/page.tsx index dc80a834..1884ddb2 100644 --- a/src/app/storefront/page.tsx +++ b/src/app/storefront/page.tsx @@ -3,13 +3,17 @@ import React, { useEffect, useState } from 'react'; import Storefront from './storefrontItems'; import ProductButtons from './productButtons'; -import { GlobalStyle } from '../../styles/components'; -import NavBar from '../../components/NavBar'; -import { ButtonsContainer, ShopAllText } from './styles'; + +import Footer from '../../components/Footer'; +import { + GlobalStyle, + ButtonsContainer, + NavBarZeroIndex, + ShopAllText, +} from './styles'; import { getProduct } from './helperFunction'; import { Product } from '../../schema/schema'; -// https://codesandbox.io/s/filter-with-react-button-r5x4i?file=/src/App.js export default function App() { const buttons = [ { @@ -51,7 +55,7 @@ export default function App() { return (
- + {buttons.map(type => ( Shop All +
); } diff --git a/src/app/storefront/storefrontItems.tsx b/src/app/storefront/storefrontItems.tsx index 7b6c18e4..22b93068 100644 --- a/src/app/storefront/storefrontItems.tsx +++ b/src/app/storefront/storefrontItems.tsx @@ -1,29 +1,16 @@ import React from 'react'; -import Link from 'next/link'; -import { StorefrontWrapper, StorefrontItem, ItemButtons } from './styles'; + +import { StorefrontWrapper } from './styles'; + +import IndividualItem from './IndividualItem'; import { Product } from '../../schema/schema'; function Storefront({ products }: { products: Product[] }) { return ( - {products.map(product => ( - - - - {product.name} - - -

{product.name}

- + {products.map(productVal => ( + ))} ); diff --git a/src/app/storefront/styles.ts b/src/app/storefront/styles.ts index ae4f1c4a..727a5af8 100644 --- a/src/app/storefront/styles.ts +++ b/src/app/storefront/styles.ts @@ -1,9 +1,29 @@ -import styled from 'styled-components'; +import styled, { createGlobalStyle } from 'styled-components'; +import { Heart } from 'react-feather'; + +import NavBar from '../../components/NavBar'; + +export const GlobalStyle = createGlobalStyle` + body { + background:white; + color:black; + } + +`; interface props { isClicked: boolean; } +export const StickyHeader = styled.div` + position: fixed; + background-color: var(--Light-Periwinkle, #f4f7ff); + filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.1)); + width: 1470px; + height: 10px; + z-index: 2; +`; + export const Button = styled.button` background-color: ${props => (props.isClicked ? '#00507f' : '#C7E1FF')}; border-radius: 50%; @@ -25,7 +45,6 @@ export const Label = styled.p` export const IndividualContainer = styled.div` width: 200px; - height: 100px; display: flex; flex-direction: column; align-items: center; @@ -45,9 +64,27 @@ export const ButtonsContainer = styled.div` display: flex; flex-direction: row; justify-content: center; + position: fixed; align-items: center; - position: absolute; - z-index: 5; + z-index: 1100; + transform: translate(0px, -30px); +`; +export const NavButton = styled.button` + margin-top: 30px; + margin-right: 25px; + color: white; + text-align: center; + font-family: sans-serif; + font-size: 15px; + font-style: normal; + font-weight: normal; + line-height: normal; + width: 70px; + height: 40px; + background: black; + border: transparent; + border-radius: 5px; + float: right; `; export const ItemButtons = styled.button` @@ -73,4 +110,22 @@ export const ShopAllText = styled.h1` padding-top: 230px; padding-left: 50px; font-family: 'Public Sans', sans-serif; + color: black; +`; + +export const HeartIcon = styled(Heart)` + color: ${props => (props.isClicked ? 'red' : 'black')}; + width: 30px; + height: 30px; + fill: ${props => (props.isClicked ? 'red' : '#c7ddff')}; + position: relative; +`; + +export const HeartContainer = styled.button` + transform: translate(245px, -280px); + position: relative; + background-color: transparent; + border: none; `; + +export const NavBarZeroIndex = styled(NavBar)``; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 00000000..b810db06 --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,31 @@ +import Location from './Location'; + +import { FooterDiv, ContactDiv } from '../styles/components'; + +export default function Footer({ ...rest }) { + return ( +
+ + +

Contact Us

+ + + + + + +
+ ); +} diff --git a/src/components/Location.tsx b/src/components/Location.tsx new file mode 100644 index 00000000..8b0e8546 --- /dev/null +++ b/src/components/Location.tsx @@ -0,0 +1,17 @@ +import { LocationDiv, Addie } from '../styles/components'; + +export default function Location(props: { + District: string; + Address: string; + Phone: string; +}) { + const { District, Address, Phone } = props; + + return ( + +

{District}

+ {Address} +

{Phone}

+ + ); +} diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx index d448d492..b1cd7044 100644 --- a/src/components/NavBar.tsx +++ b/src/components/NavBar.tsx @@ -1,12 +1,38 @@ import Image from 'next/image'; import Link from 'next/link'; -import React from 'react'; +import React, { useEffect, useState } from 'react'; -import { NavBarComp, ButtonsDiv } from '../styles/components'; +import { totalNumberOfItemsInCart } from '../app/storefront/helperFunction'; + +import { + NavBarComp, + ButtonsDiv, + CartTotalCircle, + UserProfileIcon, + ShoppingCartIcon, +} from '../styles/components'; + +export default function NavBar({ ...rest }) { + const [data, setData] = useState(0); + const [isZero, setIsZero] = useState(true); + + useEffect(() => { + const fetchData = async () => { + setData(await totalNumberOfItemsInCart()); + }; + fetchData(); + }, []); + useEffect(() => { + const changeData = async () => { + if (data > 0) { + setIsZero(false); + } + }; + changeData(); + }, [data]); -export default function NavBar() { return ( - + - Profile icon + +

User

- - Cart icon + +

Cart

+ {data} diff --git a/src/styles/components.tsx b/src/styles/components.tsx index 3c3a3d77..99c4d01a 100644 --- a/src/styles/components.tsx +++ b/src/styles/components.tsx @@ -1,9 +1,16 @@ import styled, { createGlobalStyle } from 'styled-components'; + +import { User, ShoppingCart } from 'react-feather'; import COLORS from './colors'; export const GlobalStyle = createGlobalStyle` body { background: white; + color:black; + } + span{ + + color:black; } `; @@ -39,6 +46,7 @@ export const NavButton = styled.button` border: transparent; border-radius: 5px; float: right; + z-index: 101; `; export const NavBarComp = styled.nav` @@ -47,13 +55,14 @@ export const NavBarComp = styled.nav` justify-content: space-between; padding-left: 30px; padding-right: 30px; - height: 200px; + height: 140px; padding-top: 20px; - z-index: 1; - position: absolute; + position: fixed; + width: 100%; background: var(--Light-Periwinkle, #f4f7ff); box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1); + z-index: 100; `; export const ButtonsDiv = styled.div` @@ -63,3 +72,68 @@ export const ButtonsDiv = styled.div` justify-content: space-around; padding-top: 15px; `; + +export const LocationDiv = styled.div` + display: flex; + flex-direction: column; + + width: 300px; + height: 250px; + margin-right: 60px; + + color: var(--Black, #101010); + + font-family: Public Sans; + font-style: normal; + line-height: normal; +`; + +export const ContactDiv = styled.div` + width: 250px; + height: 250px; + margin-right: 130px; + margin-left: 30px; + color: var(--Black, #101010); + text-align: center; + font-family: Public Sans; + font-size: 20px; + font-style: normal; + line-height: normal; +`; + +export const FooterDiv = styled.div` + display: flex; + flex-direction: row; + color: black; + width: 1290px; + padding-left: 10px; + padding-top: 40px; + margin-left: 70px; + border-top: 2px solid black; + + height: 200px; +`; + +export const Addie = styled.p` + margin-top: 30px; + margin-bottom: 30px; +`; + +export const CartTotalCircle = styled.div<{ $isZero?: boolean }>` + width: 20px; + height: 20px; + background: var(--Marine-Blue, #333286); + border-radius: 50%; + text-align: center; + transform: translate(19px, -58px); + color: white; + display: ${props => (props.$isZero ? 'none' : 'content')}; +`; + +export const UserProfileIcon = styled(User)` + margin-left: 5px; +`; + +export const ShoppingCartIcon = styled(ShoppingCart)` + margin-left: 3px; +`;