115 lines
5.8 KiB
TypeScript
115 lines
5.8 KiB
TypeScript
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import Layout from '@/layouts/client/layout';
|
|
import { useTranslations } from '@/utils/i18n';
|
|
import { Head } from '@inertiajs/react';
|
|
|
|
export default function Product({
|
|
product,
|
|
}: {
|
|
product: [{ title: string; type: string; image_url: string }];
|
|
}) {
|
|
const { t } = useTranslations();
|
|
return (
|
|
<>
|
|
<Layout>
|
|
<Head title="Our Products" />
|
|
<section className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-12 py-8">
|
|
<h1 className="font-serif text-5xl font-medium tracking-tight">
|
|
{t('pages.product.sections.first.title')}
|
|
</h1>
|
|
<Tabs
|
|
defaultValue="traditional"
|
|
className="flex flex-col gap-8"
|
|
>
|
|
<TabsList className="flex items-center gap-4 bg-transparent">
|
|
<TabsTrigger
|
|
value="traditional"
|
|
className="!h-auto cursor-pointer px-4 py-2 data-[state=active]:bg-primary data-[state=active]:text-white"
|
|
>
|
|
{t('pages.product.sections.first.tab1')}
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="modern"
|
|
className="!h-auto cursor-pointer px-4 py-2 data-[state=active]:bg-primary data-[state=active]:text-white"
|
|
>
|
|
{t('pages.product.sections.first.tab2')}
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="abstract"
|
|
className="!h-auto cursor-pointer px-4 py-2 data-[state=active]:bg-primary data-[state=active]:text-white"
|
|
>
|
|
{t('pages.product.sections.first.tab3')}
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="traditional">
|
|
<div className="grid grid-cols-4 gap-6 max-md:grid-cols-3 max-sm:grid-cols-2 max-sm:gap-4">
|
|
{product.map((e, index) =>
|
|
e.type === 'traditional' ? (
|
|
<img
|
|
key={index}
|
|
src={e.image_url}
|
|
alt={e.title}
|
|
className="aspect-video rounded-md object-cover object-center"
|
|
/>
|
|
) : null,
|
|
)}
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="modern">
|
|
<div className="grid grid-cols-4 gap-6 max-md:grid-cols-3 max-sm:grid-cols-2 max-sm:gap-4">
|
|
{product.map((e, index) =>
|
|
e.type === 'modern' ? (
|
|
<img
|
|
key={index}
|
|
src={e.image_url}
|
|
alt={e.title}
|
|
className="aspect-video rounded-md object-cover object-center"
|
|
/>
|
|
) : null,
|
|
)}
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="abstract">
|
|
<div className="grid grid-cols-4 gap-6 max-md:grid-cols-3 max-sm:grid-cols-2 max-sm:gap-4">
|
|
{product.map((e, index) =>
|
|
e.type === 'abstract' ? (
|
|
<img
|
|
key={index}
|
|
src={e.image_url}
|
|
alt={e.title}
|
|
className="aspect-video rounded-md object-cover object-center"
|
|
/>
|
|
) : null,
|
|
)}
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</section>
|
|
|
|
<section className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-12 py-8 max-md:px-8">
|
|
<div className="flex flex-col gap-2">
|
|
<h2 className="font-serif text-3xl font-medium tracking-tight">
|
|
{t('pages.product.sections.second.title')}
|
|
</h2>
|
|
<p className="text-gray-500">
|
|
{t('pages.product.sections.second.desc')}
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-4 gap-6 max-md:grid-cols-3 max-sm:grid-cols-2 max-sm:gap-4">
|
|
{product.map((e, index) =>
|
|
e.type === 'art' ? (
|
|
<img
|
|
key={index}
|
|
src={e.image_url}
|
|
alt={e.title}
|
|
className="aspect-video rounded-md object-cover object-center"
|
|
/>
|
|
) : null,
|
|
)}
|
|
</div>
|
|
</section>
|
|
</Layout>
|
|
</>
|
|
);
|
|
}
|