cart mechanism complete

components/pages/product/add-cart-button.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import {ShoppingCartIcon} from 'lucide-react'
+import {useTranslations} from 'next-intl'
+
+import {dump} from '@/lib/utils'
+import useCartStore, {CartItem} from '@/store/cart-store'
+
+export default function AddCartButton({product}: {product: CartItem}) {
+	const t = useTranslations('cart')
+	const addItemToCart = useCartStore(state => state.addItemToCart)
+	const {cartItems} = useCartStore(state => state)
+
+	return (
+		<>
+			<button
+				className='flex flex-col items-center'
+				role='button'
+				title={t('basket')}
+				onClick={() => addItemToCart(product)}
+			>
+				<ShoppingCartIcon className='h-[21px] w-[21px]' />
+			</button>
+
+			<pre>{dump(cartItems)}</pre>
+		</>
+	)
+}

components/pages/product/index.tsx

@@ -0,0 +1,57 @@
+import {getLocale} from 'next-intl/server'
+import {notFound} from 'next/navigation'
+import {strict} from 'node:assert'
+
+import AddCartButton from '@/components/pages/product/add-cart-button'
+import {ProductProps, getProductById} from '@/lib/data/models/product'
+import {dump} from '@/lib/utils'
+import useCartStore from '@/store/cart-store'
+import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/ui/tabs'
+
+export default async function ProductPageIndex({id}: {id: string}) {
+	const product = await getProductById(parseInt(id))
+	if (!product) notFound()
+	const {locales, toStore} = product as ProductProps
+	const lang = await getLocale()
+	const locale = locales[lang === 'uk' ? 0 : 1]
+	const store = JSON.parse(JSON.stringify(toStore[0]))
+
+	return (
+		<div className='mt-1'>
+			<div className='container flex flex-col sm:flex-row'>
+				<div>
+					<AddCartButton
+						product={{
+							id: product.id,
+							quantity: 1,
+							title: locale.title,
+							price: store.price as string, //parseFloat().toFixed(2),
+							image: product.image
+						}}
+					/>
+					<hr />
+				</div>
+				<div>
+					<Tabs defaultValue='article' className=''>
+						<TabsList className='grid w-full grid-cols-2'>
+							<TabsTrigger value='article'>Опис</TabsTrigger>
+							<TabsTrigger value='instuction'>Інструкція</TabsTrigger>
+						</TabsList>
+						<TabsContent value='article'>
+							<article
+								className='bw-product__text'
+								dangerouslySetInnerHTML={{__html: locale.content as string}}
+							></article>
+						</TabsContent>
+						<TabsContent value='instuction'>
+							<div
+								className='bw-product__text'
+								dangerouslySetInnerHTML={{__html: locale.instruction as string}}
+							></div>
+						</TabsContent>
+					</Tabs>
+				</div>
+			</div>
+		</div>
+	)
+}