grand commit

components/pages/product/index.tsx

@@ -1,37 +1,79 @@
-import {getLocale} from 'next-intl/server'
+import {ProductResource} from '@prisma/client'
+import {getProductByIdWitData} from '@prisma/client/sql'
+import {getTranslations} 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 ProductCarousel from '@/components/pages/product/carousel'
+import AddCartButton from '@/components/shared/store/add-cart-button'
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator
+} from '@/components/ui/breadcrumb'
+import {getProductResources} from '@/lib/data/models/product'
+import {CategoryPageSqlSchema} from '@/lib/data/models/sqlSchemas'
+import {db} from '@/lib/db/prisma/client'
+import {thisLocale, toPrice} from '@/lib/utils'
+import {Separator} from '@/ui/separator'
 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]))
+	const t = await getTranslations('Common')
+
+	const data: CategoryPageSqlSchema[] = await db.$queryRawTyped(
+		getProductByIdWitData(id)
+	)
+
+	const locale = await thisLocale(data)
+	if (!locale) notFound()
+
+	const resources: ProductResource[] | null = await getProductResources(
+		parseInt(id)
+	)
+
+	//const files = await getMetaOfFile(locale.productId)
 
 	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>
+			<div className='container flex flex-col gap-8 sm:flex-row'>
+				{/*<pre>{dump(resources)}</pre>*/}
+				<div className='bw-product-col-left pt-3'>
+					<Breadcrumb className='mb-4'>
+						<BreadcrumbList>
+							<BreadcrumbItem>
+								<BreadcrumbLink href={'/'}>{t('home')}</BreadcrumbLink>
+							</BreadcrumbItem>
+							<BreadcrumbSeparator />
+							<BreadcrumbItem>
+								<BreadcrumbLink href={`/category/${locale.categorySlug}`}>
+									{locale.categoryTitle}
+								</BreadcrumbLink>
+							</BreadcrumbItem>
+							<BreadcrumbSeparator />
+							<BreadcrumbItem>
+								<BreadcrumbPage>{locale.title}</BreadcrumbPage>
+							</BreadcrumbItem>
+						</BreadcrumbList>
+					</Breadcrumb>
+					<div className='flex w-[82%] items-center justify-between'>
+						<h1 className='my-4 text-3xl font-bold text-brand-violet-950'>
+							{locale.title}
+						</h1>
+						<AddCartButton
+							product={{
+								id: locale.productId,
+								quantity: 1,
+								title: locale.title,
+								price: toPrice(locale.price),
+								image: locale.image
+							}}
+						/>
+					</div>
+					<Separator className='my-4 w-[82%] border-b border-brand-violet' />
+					<ProductCarousel images={resources} title={locale.title} />
 					<Tabs defaultValue='article' className=''>
 						<TabsList className='grid w-full grid-cols-2'>
 							<TabsTrigger value='article'>Опис</TabsTrigger>
@@ -51,6 +93,14 @@ export default async function ProductPageIndex({id}: {id: string}) {
 						</TabsContent>
 					</Tabs>
 				</div>
+				<section className='bw-product-col-right bg-gray-50 pt-3'>
+					<div className=''>
+						{t('price')}:
+						<span className='ml-2 flex-auto text-right text-xl font-bold text-brand-violet'>
+							{toPrice(locale.price)}
+						</span>
+					</div>
+				</section>
 			</div>
 		</div>
 	)