diff options
Diffstat (limited to 'src/core/components/elements/Appbar')
| -rw-r--r-- | src/core/components/elements/Appbar/Appbar.jsx | 24 |
1 files changed, 23 insertions, 1 deletions
diff --git a/src/core/components/elements/Appbar/Appbar.jsx b/src/core/components/elements/Appbar/Appbar.jsx index f1456a7c..e19d5f0a 100644 --- a/src/core/components/elements/Appbar/Appbar.jsx +++ b/src/core/components/elements/Appbar/Appbar.jsx @@ -1,6 +1,8 @@ import { useRouter } from 'next/router' import Link from '../Link/Link' import { HomeIcon, Bars3Icon, ShoppingCartIcon, ChevronLeftIcon } from '@heroicons/react/24/outline' +import { useEffect, useState } from 'react' +import { getCart } from '@/core/utils/cart' /** * The AppBar component is a navigation component used to display a header or toolbar @@ -13,6 +15,21 @@ import { HomeIcon, Bars3Icon, ShoppingCartIcon, ChevronLeftIcon } from '@heroico const AppBar = ({ title }) => { const router = useRouter() + const [cartCount, setCartCount] = useState(0) + + useEffect(() => { + const handleCartChange = () => { + setCartCount(Object.keys(getCart()).length) + } + handleCartChange() + + window.addEventListener('localStorageChange', handleCartChange) + + return () => { + window.removeEventListener('localStorageChange', handleCartChange) + } + }, []) + return ( <nav className='sticky top-0 z-50 bg-white border-b border-gray_r-6 flex justify-between'> <div className='flex items-center'> @@ -23,7 +40,12 @@ const AppBar = ({ title }) => { </div> <div className='flex items-center px-2'> <Link href='/shop/cart' className='py-4 px-2'> - <ShoppingCartIcon className='w-6 text-gray_r-12' /> + <div className='relative'> + <ShoppingCartIcon className='w-6 text-gray_r-12' /> + <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'> + {cartCount} + </span> + </div> </Link> <Link href='/' className='py-4 px-2'> <HomeIcon className='w-6 text-gray_r-12' /> |