admin/soorya-carpet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: New design and optimization

Browse Source
This commit is contained in:
admin
2025-10-27 13:23:05 +05:45
parent 63777cb3c1
commit db9315ad22
44 changed files with 2877 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
resources/js/pages/product.tsx
View File

@@ -1,29 +1,113 @@
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() {
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">
Our Exquisite Collections
{t('pages.product.sections.first.title')}
</h1>
<Tabs defaultValue="account" className="w-[400px]">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
<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="account">
Make changes to your account here.
<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="password">
Change your password here.
<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>
</>
);