cart mechanism complete

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

@@ -0,0 +1,25 @@
+'use client'
+
+import {ShoppingCartIcon} from 'lucide-react'
+import {useTranslations} from 'next-intl'
+
+import {Link} from '@/i18n/routing'
+import useCartStore from '@/store/cart-store'
+
+export default function HeaderShoppingCartIcon() {
+	const t = useTranslations('cart')
+	const {cartItems} = useCartStore()
+	const cartCount = cartItems.length
+
+	return (
+		<Link href={'/cart' as never} className='header-button' aria-label='Кошик'>
+			<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>
+			</button>
+		</Link>
+	)
+}