111 lines
3.4 KiB
TypeScript
111 lines
3.4 KiB
TypeScript
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface TabItem {
|
|
id: string;
|
|
title: string;
|
|
value: string;
|
|
summary: string;
|
|
image: {
|
|
src: string;
|
|
alt: string;
|
|
};
|
|
}
|
|
|
|
const LIST: TabItem[] = [
|
|
{
|
|
id: "edit-by-text",
|
|
title: "گزارش‌ساز",
|
|
value: "1",
|
|
summary:
|
|
"داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
alt: "گزارش‌ساز",
|
|
},
|
|
},
|
|
{
|
|
id: "clear-audio",
|
|
title: "Pivot تعاملی",
|
|
value: "2",
|
|
summary: "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/placeholder-2.svg",
|
|
alt: "تحلیل داده سازمان",
|
|
},
|
|
},
|
|
{
|
|
id: "green-screen",
|
|
title: "داشبورد مدیریتی",
|
|
value: "3",
|
|
summary: "داده سازمانی",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/placeholder-3.svg",
|
|
alt: "داشبورد هوش تجاری",
|
|
},
|
|
},
|
|
];
|
|
|
|
interface Feature213Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature213 = ({ className }: Feature213Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("w-full max-w-full bg-background py-32", className)}
|
|
>
|
|
<div className="container min-w-0">
|
|
<div className="mx-auto mb-8 flex max-w-[52.5rem] flex-col items-center justify-between gap-6 md:mb-20">
|
|
<h2 className="text-center text-2xll tracking-tight text-balance text-foreground lg:text-2xll">
|
|
تصمیم استراتژیک را داده‌محور کنید
|
|
</h2>
|
|
</div>
|
|
|
|
<Tabs
|
|
dir="rtl"
|
|
defaultValue={LIST[0].value}
|
|
className="flex w-full min-w-0 flex-col items-stretch gap-8 lg:flex-row! lg:items-start lg:gap-14"
|
|
>
|
|
<TabsList className="!h-fit w-full shrink-0 flex-col gap-2.5 bg-transparent p-0 lg:w-fit lg:max-w-[34.0625rem]">
|
|
{LIST.map((item) => (
|
|
<TabsTrigger
|
|
className="w-full flex-col items-start rounded-[0.75rem] p-5 text-right whitespace-normal data-[state=active]:bg-muted"
|
|
key={item.id}
|
|
value={item.value}
|
|
>
|
|
<div className="leading-normal font-bold">{item.title}</div>
|
|
<div className="leading-normal text-pretty text-muted-foreground">
|
|
{item.summary}
|
|
</div>
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
|
|
<div className="relative min-w-0 w-full flex-1">
|
|
{LIST.map((item) => (
|
|
<TabsContent
|
|
className="mt-0 w-full min-w-0"
|
|
key={item.id}
|
|
value={item.value}
|
|
>
|
|
<div className="aspect-video w-full min-w-0 overflow-hidden rounded-[0.75rem] bg-muted">
|
|
<img
|
|
src={item.image.src}
|
|
alt={item.image.alt}
|
|
className="block size-full max-w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</TabsContent>
|
|
))}
|
|
</div>
|
|
</Tabs>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature213 };
|