cart mechanism complete

2025-02-05 21:17:25 +02:00
parent 5ac895ea3e
commit f594f001f6
24 changed files with 441 additions and 78 deletions
--- a/app/[locale]/(root)/(shop)/cart/page.tsx
+++ b/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>
+	)
+}
--- a/app/[locale]/(root)/(shop)/checkout/page.tsx
+++ b/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>
-}
--- a/app/[locale]/(root)/(shop)/product/[[...slug]]/page.tsx
+++ b/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]} />
+}
--- a/app/[locale]/(root)/page.tsx
+++ b/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 />
--- a/app/globals.css
+++ b/app/globals.css
@@ -214,3 +214,25 @@ body {
    }
  }
 }
+
+.bw-product__text * {
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
+  font-weight: 400 !important;
+  font-size: 1rem !important;
+  line-height: 1.45 !important;
+  color: rgb(40, 26, 76) !important;
+
+}
+.bw-product__text {
+  h2 * {
+    font-weight: 700 !important;
+    font-size: 1.375rem !important;
+  }
+}
+
+.bw-cart-item-counter {
+  input {
+    @apply text-xl leading-none border-0 text-brand-violet font-bold;
+  }
+
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,9 +1,10 @@
 import type {Metadata} from 'next'
 import {headers} from 'next/headers'
 import {ReactNode} from 'react'
+import {Toaster} from 'react-hot-toast'

 import './globals.css'
-import {Toaster} from '@/components/ui/toaster'
+//import {Toaster} from '@/components/ui/toaster'
 import {routing} from '@/i18n/routing'
 import {APP_DESCRIPTION, APP_NAME, APP_SLOGAN} from '@/lib/constants'

@@ -25,7 +26,8 @@ export default async function RootLayout({
 		<html lang={locale} suppressHydrationWarning>
 			<body className='min-h-screen antialiased'>
 				{children}
-				<Toaster />
+				{/*<Toaster />*/}
+				<Toaster position='top-right' reverseOrder={false} />
 			</body>
 		</html>
 	)