114 lines
3.9 KiB
TypeScript
114 lines
3.9 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { Cog, Lightbulb, ListChecks } from "lucide-react";
|
|
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Feature {
|
|
id: string;
|
|
icon: ReactNode;
|
|
heading: string;
|
|
description: string;
|
|
image: string;
|
|
imageAlt: string;
|
|
url: string;
|
|
isDefault: boolean;
|
|
}
|
|
|
|
const defaultFeatures: Feature[] = [
|
|
{
|
|
id: "feature-1",
|
|
heading: "موجودی انبار",
|
|
icon: <Lightbulb className="size-4" />,
|
|
description:
|
|
"محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
imageAlt: "مدیریت سفارش",
|
|
url: "https://ShadcnBlocks",
|
|
isDefault: true,
|
|
},
|
|
{
|
|
id: "feature-2",
|
|
icon: <ListChecks className="size-4" />,
|
|
heading: "بازگشت مشتری",
|
|
description:
|
|
"پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-2.svg",
|
|
imageAlt: "داشبورد فروش",
|
|
url: "https://ShadcnBlocks",
|
|
isDefault: false,
|
|
},
|
|
{
|
|
id: "feature-3",
|
|
icon: <Cog className="size-4" />,
|
|
heading: "صفحه فرود",
|
|
description:
|
|
"وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-3.svg",
|
|
imageAlt: "پنل فروشگاه آنلاین",
|
|
url: "https://ShadcnBlocks",
|
|
isDefault: false,
|
|
},
|
|
];
|
|
|
|
interface Feature51Props {
|
|
features?: Feature[];
|
|
className?: string;
|
|
}
|
|
|
|
const Feature51 = ({
|
|
features = defaultFeatures,
|
|
className,
|
|
}: Feature51Props) => {
|
|
const defaultTab =
|
|
features.find((tab) => tab.isDefault)?.id || features[0].id;
|
|
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<Tabs defaultValue={defaultTab} className="p-0" dir="rtl">
|
|
<TabsList className="flex w-full flex-col gap-2 bg-background p-0 group-data-horizontal/tabs:h-auto md:flex-row">
|
|
{features.map((tab) => (
|
|
<TabsTrigger
|
|
key={tab.id}
|
|
value={tab.id}
|
|
aria-label={tab.heading}
|
|
className="group flex w-full flex-col items-start justify-start gap-1 rounded-md border border-border p-4 text-start whitespace-normal shadow-none transition-opacity duration-200 hover:border group-data-[variant=default]/tabs-list:data-active:border-primary group-data-[variant=default]/tabs-list:data-active:shadow-none"
|
|
>
|
|
<div className="flex items-center gap-2 md:flex-col md:items-start lg:gap-4">
|
|
{tab.icon && (
|
|
<span className="flex size-8 items-center justify-center rounded-full bg-muted text-muted-foreground lg:size-10">
|
|
{tab.icon}
|
|
</span>
|
|
)}
|
|
<p className="text-lg font-semibold transition-opacity duration-200">
|
|
{tab.heading}
|
|
</p>
|
|
</div>
|
|
<p className="font-normal text-muted-foreground transition-opacity duration-200 md:block">
|
|
{tab.description}
|
|
</p>
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
{features.map((tab) => (
|
|
<TabsContent
|
|
key={tab.id}
|
|
value={tab.id}
|
|
className="transition-opacity duration-300"
|
|
>
|
|
<img
|
|
src={tab.image}
|
|
alt={tab.imageAlt}
|
|
className="aspect-video w-full rounded-md border border-border object-cover transition-opacity duration-300"
|
|
/>
|
|
</TabsContent>
|
|
))}
|
|
</Tabs>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature51 };
|