stuff done

components/shared/header/shopping-cart-icon.tsx

@@ -4,21 +4,30 @@ import {ShoppingCartIcon} from 'lucide-react'
 import {useTranslations} from 'next-intl'
 
 import {Link} from '@/i18n/routing'
-import useCartStore from '@/store/cart-store'
+import useCartStore, {CartItem} from '@/store/cart-store'
 
 export default function HeaderShoppingCartIcon() {
-	const t = useTranslations('cart')
+	const t = useTranslations('Common')
 	const {cartItems} = useCartStore()
-	const cartCount = cartItems.length
+	const cartCount = cartItems.reduce(
+		(accumulator: number, item: CartItem) => accumulator + item.quantity,
+		0
+	)
 
 	return (
-		<Link href={'/cart' as never} className='header-button' aria-label='Кошик'>
+		<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]' />
 
-				<span className='font1-bold text-sm'>
-					{t('basket')} [{cartCount}]
-				</span>
+				{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>
 	)