35 lines
941 B
TypeScript
35 lines
941 B
TypeScript
'use client'
|
|
|
|
import {ShoppingCartIcon} from 'lucide-react'
|
|
import {useTranslations} from 'next-intl'
|
|
|
|
import {Link} from '@/i18n/routing'
|
|
import useCartStore, {CartItem} from '@/store/cart-store'
|
|
|
|
export default function HeaderShoppingCartIcon() {
|
|
const t = useTranslations('Common')
|
|
const {cartItems} = useCartStore()
|
|
const cartCount = cartItems.reduce(
|
|
(accumulator: number, item: CartItem) => accumulator + item.quantity,
|
|
0
|
|
)
|
|
|
|
return (
|
|
<Link
|
|
href={'/cart' as never}
|
|
className='header-button relative'
|
|
aria-label={t('basket')}
|
|
>
|
|
<button className='flex flex-col items-center' role='button'>
|
|
<ShoppingCartIcon className='h-[21px] w-[21px]' />
|
|
|
|
{cartCount > 0 && (
|
|
<div className='absolute -right-1 -top-1 h-[20px] w-[20px] rounded-full border border-brand-violet bg-brand-yellow pl-0 pr-[1px] text-[0.625rem] font-bold leading-[18px]'>
|
|
{cartCount}
|
|
</div>
|
|
)}
|
|
</button>
|
|
</Link>
|
|
)
|
|
}
|