106 lines
3.3 KiB
TypeScript
106 lines
3.3 KiB
TypeScript
import {
|
|
Blocks,
|
|
Fingerprint,
|
|
LayoutPanelTop,
|
|
MessageCircleMore,
|
|
Users,
|
|
Workflow,
|
|
} from "lucide-react";
|
|
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const tabs = [
|
|
{
|
|
title: "بهینهسازی محتوا",
|
|
image: "/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
icon: (
|
|
<MessageCircleMore
|
|
className="size-6 text-primary lg:size-8"
|
|
strokeWidth={1.5}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
title: "تحلیل رقیب",
|
|
image: "/block-media/shadcnblocks/block/placeholder-2.svg",
|
|
icon: (
|
|
<Blocks className="size-6 text-primary lg:size-8" strokeWidth={1.5} />
|
|
),
|
|
},
|
|
{
|
|
title: "لینک داخلی",
|
|
image: "/block-media/shadcnblocks/block/placeholder-3.svg",
|
|
icon: <Users className="size-6 text-primary lg:size-8" strokeWidth={1.5} />,
|
|
},
|
|
{
|
|
title: "گزارش Core Web Vitals",
|
|
image: "/block-media/shadcnblocks/block/placeholder-4.svg",
|
|
icon: (
|
|
<Workflow className="size-6 text-primary lg:size-8" strokeWidth={1.5} />
|
|
),
|
|
},
|
|
{
|
|
title: "پیشنهاد عنوان",
|
|
image: "/block-media/shadcnblocks/block/placeholder-5.svg",
|
|
icon: (
|
|
<LayoutPanelTop
|
|
className="size-6 text-primary lg:size-8"
|
|
strokeWidth={1.5}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
title: "تحلیل کلمه کلیدی",
|
|
image: "/block-media/shadcnblocks/block/placeholder-6.svg",
|
|
icon: (
|
|
<Fingerprint
|
|
className="size-6 text-primary lg:size-8"
|
|
strokeWidth={1.5}
|
|
/>
|
|
),
|
|
},
|
|
];
|
|
|
|
interface Feature52Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature52 = ({ className }: Feature52Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<Tabs defaultValue="feature-1" dir="rtl">
|
|
<TabsList className="flex h-auto w-full flex-wrap items-stretch justify-between gap-2 bg-background p-0 group-data-horizontal/tabs:h-auto">
|
|
{tabs.map((tab, index) => (
|
|
<TabsTrigger
|
|
key={index}
|
|
value={`feature-${index + 1}`}
|
|
className="flex h-auto min-h-0 min-w-0 flex-1 flex-col items-stretch justify-start gap-2 self-stretch rounded-md border border-border bg-muted px-2 py-4 text-start whitespace-normal text-primary hover:border lg:py-6 group-data-[variant=default]/tabs-list:data-active:border-primary group-data-[variant=default]/tabs-list:data-active:shadow-none"
|
|
>
|
|
<div className="flex w-full flex-1 flex-col items-center justify-center gap-4">
|
|
{tab.icon}
|
|
<p className="line-clamp-2 min-h-10 w-full text-center text-sm leading-snug font-semibold text-balance lg:min-h-12 lg:text-base">
|
|
{tab.title}
|
|
</p>
|
|
</div>
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
{tabs.map((tab, index) => (
|
|
<TabsContent key={index} value={`feature-${index + 1}`}>
|
|
<img
|
|
src={tab.image}
|
|
alt={`نمای ${tab.title}`}
|
|
className="aspect-video w-full rounded-md object-cover"
|
|
/>
|
|
</TabsContent>
|
|
))}
|
|
</Tabs>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature52 };
|