hamid zarghami
71 lines
2.9 KiB
TypeScript
71 lines
2.9 KiB
TypeScript
import { NextPage } from 'next'
|
||
import Layout from '@/hoc/Layout'
|
||
import {
|
||
Breadcrumb,
|
||
BreadcrumbItem,
|
||
BreadcrumbLink,
|
||
BreadcrumbList,
|
||
BreadcrumbPage,
|
||
BreadcrumbSeparator,
|
||
} from '@/components/ui/breadcrumb'
|
||
import ProductImage from '@/app/product/components/ProductImage'
|
||
import BaseInformation from '@/app/product/components/BaseInformation'
|
||
import ShopInformation from '@/app/product/components/ShopInformation'
|
||
import Specifications from '@/app/product/components/Specifications'
|
||
import ProsCons from '@/app/product/components/ProsCons'
|
||
import Description from '@/app/product/components/Description'
|
||
import Reviews from '@/app/product/components/Reviews'
|
||
import Questions from '@/app/product/components/Questions'
|
||
|
||
const SingleProduct: NextPage = () => {
|
||
return (
|
||
<div className='mt-14 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20'>
|
||
<div className='flex flex-col sm:flex-row justify-between gap-4 sm:gap-0'>
|
||
<Breadcrumb aria-label="breadcrumb">
|
||
<BreadcrumbList className="text-sm text-muted-foreground">
|
||
<BreadcrumbItem>
|
||
<BreadcrumbLink href="/">فروشگاه آناهیتا</BreadcrumbLink>
|
||
</BreadcrumbItem>
|
||
<BreadcrumbSeparator className="text-muted-foreground select-none">/</BreadcrumbSeparator>
|
||
<BreadcrumbItem>
|
||
<BreadcrumbLink href="/products">بهداشت خانگی</BreadcrumbLink>
|
||
</BreadcrumbItem>
|
||
<BreadcrumbSeparator className="text-muted-foreground select-none">/</BreadcrumbSeparator>
|
||
<BreadcrumbItem>
|
||
<BreadcrumbPage className="text-foreground">مواد شوینده</BreadcrumbPage>
|
||
</BreadcrumbItem>
|
||
</BreadcrumbList>
|
||
</Breadcrumb>
|
||
|
||
<div className='text-primary text-xs sm:text-sm'>فروشنده شوید</div>
|
||
</div>
|
||
|
||
<div className='flex flex-col xl:flex-row gap-4 sm:gap-6 mt-8 sm:mt-12 md:mt-14'>
|
||
<div className='xl:w-[325px] xl:shrink-0'>
|
||
<ShopInformation />
|
||
</div>
|
||
<div className='flex-1 flex flex-col gap-6'>
|
||
<div className='flex flex-col lg:flex-row gap-4 sm:gap-6'>
|
||
<ProductImage />
|
||
<BaseInformation />
|
||
</div>
|
||
<div>
|
||
<Specifications />
|
||
<Description />
|
||
<ProsCons />
|
||
<Reviews />
|
||
<Questions />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default function SingleProductWithLayout() {
|
||
return (
|
||
<Layout>
|
||
<SingleProduct />
|
||
</Layout>
|
||
)
|
||
} |