cart mechanism complete

app/[locale]/(root)/(shop)/cart/page.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import {useTranslations} from 'next-intl'
+
+import CartItems from '@/components/pages/cart/items'
+
+export default function Cart() {
+	const t = useTranslations('cart')
+
+	// const subtotal = items.reduce(
+	// 	(total, item) => total + item.price * item.quantity,
+	// 	0
+	// )
+	// const total = subtotal
+
+	return (
+		<div className='mt-1'>
+			<div className='container'>
+				<section className='mx-auto my-8 max-w-[640px] text-brand-violet'>
+					<h1 className='text-3xl font-bold'>{t('basket')}</h1>
+					<div className='bsdg-brand-violet-200 my-4 grid grid-cols-3 gap-4 border-t-2 border-brand-violet py-4'>
+						<div className='bg-brand-violet-100'>Назва</div>
+						<div className='bg-brand-violet-100'>Кількість</div>
+						<div className='bg-brand-violet-100'>Вартість</div>
+					</div>
+					<CartItems />
+				</section>
+			</div>
+		</div>
+	)
+}

app/[locale]/(root)/(shop)/checkout/page.tsx

@@ -1,12 +0,0 @@
-import {Metadata} from 'next'
-
-export const metadata: Metadata = {
-	title: 'Checkout'
-}
-
-export default function CheckoutPage() {
-	//throw new Error('NOT IMPLEMENTED')
-
-	//const session = await auth()
-	return <div>CheckoutPage</div>
-}

app/[locale]/(root)/(shop)/product/[[...slug]]/page.tsx

@@ -0,0 +1,16 @@
+import {notFound} from 'next/navigation'
+
+import ProductPageIndex from '@/components/pages/product'
+
+export default async function Products({
+	params
+}: {
+	params: Promise<{slug?: string}>
+}) {
+	const {slug} = await params
+	const [uri] = slug || []
+	const id = (uri || '').match(/^(\d+)-./)
+	if (!id) notFound()
+
+	return <ProductPageIndex id={id[1]} />
+}

app/[locale]/(root)/page.tsx

@@ -43,22 +43,6 @@ export default async function HomePage() {
 			</div>
 			{/*<pre>{JSON.stringify(session)}</pre>*/}
 
-			<section className='relative mx-auto mt-8 h-[640px] w-[840px] bg-brand-violet-200'>
-				<Image
-					src={'/uploads/products/IMG_6572.jpg'}
-					//fill
-					//sizes='(min-width: 808px) 50vw, 100vw'
-					width={1280}
-					height={1280}
-					alt=''
-					title=''
-					priority
-					style={{
-						objectFit: 'contain' // cover, contain, none
-					}}
-				/>
-			</section>
-
 			<section className='mb-4 mt-[128px]'>
 				<div className='container'>
 					<FeatureCards />