108 lines
3.4 KiB
TypeScript
108 lines
3.4 KiB
TypeScript
import {ProductResource} from '@prisma/client'
|
||
import {getProductByIdWitData} from '@prisma/client/sql'
|
||
import {getTranslations} from 'next-intl/server'
|
||
import {notFound} from 'next/navigation'
|
||
|
||
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 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 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>
|
||
<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>
|
||
<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>
|
||
)
|
||
}
|