125 lines
3.4 KiB
TypeScript
125 lines
3.4 KiB
TypeScript
import {
|
|
ArrowRight,
|
|
Award,
|
|
Building2,
|
|
HeartHandshake,
|
|
Leaf,
|
|
Lightbulb,
|
|
Trophy,
|
|
} from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface ListItem {
|
|
icon: React.ReactNode;
|
|
title: string;
|
|
category: string;
|
|
description: string;
|
|
link: string;
|
|
}
|
|
|
|
interface List2Props {
|
|
heading?: string;
|
|
items?: ListItem[];
|
|
className?: string;
|
|
}
|
|
|
|
const defaultItems: ListItem[] = [
|
|
{
|
|
icon: <Trophy />,
|
|
title: "تقدیر صنعتی",
|
|
category: "دستاورد",
|
|
description: "جایزه عملکرد برجسته.",
|
|
link: "#",
|
|
},
|
|
{
|
|
icon: <Award />,
|
|
title: "جایزه تعالی",
|
|
category: "تقدیر",
|
|
description: "برنده بهترین در دسته.",
|
|
link: "#",
|
|
},
|
|
{
|
|
icon: <Lightbulb />,
|
|
title: "جایزه نوآوری",
|
|
category: "فناوری",
|
|
description: "راهکار پیشرو سال.",
|
|
link: "#",
|
|
},
|
|
{
|
|
icon: <HeartHandshake />,
|
|
title: "موفقیت مشتری",
|
|
category: "خدمات",
|
|
description: "ارائه‌دهنده راهکار با بالاترین امتیاز.",
|
|
link: "#",
|
|
},
|
|
{
|
|
icon: <Building2 />,
|
|
title: "رهبری جهانی",
|
|
category: "مدیریت",
|
|
description: "تیم اجرایی سال.",
|
|
link: "#",
|
|
},
|
|
{
|
|
icon: <Leaf />,
|
|
title: "اثر پایداری",
|
|
category: "محیط‌زیست",
|
|
description: "تعالی در طرح سبز.",
|
|
link: "#",
|
|
},
|
|
];
|
|
|
|
const List2 = ({
|
|
heading = "افتخارات و دستاوردهای ما",
|
|
items = defaultItems,
|
|
className,
|
|
}: List2Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container px-0 md:px-8">
|
|
<h1 className="mb-10 px-4 text-start text-3xl font-semibold md:mb-14 md:text-xl">
|
|
{heading}
|
|
</h1>
|
|
<div className="flex flex-col">
|
|
<Separator />
|
|
{items.map((item, index) => (
|
|
<React.Fragment key={index}>
|
|
<div className="grid items-center gap-4 px-4 py-5 md:grid-cols-4">
|
|
<div className="order-2 flex items-center gap-2 md:order-none">
|
|
<span className="flex h-14 w-16 shrink-0 items-center justify-center rounded-md bg-muted">
|
|
{item.icon}
|
|
</span>
|
|
<div className="flex flex-col gap-1 text-start">
|
|
<h3 className="font-semibold">{item.title}</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
{item.category}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p className="order-1 text-start text-xl font-semibold md:order-none md:col-span-2">
|
|
{item.description}
|
|
</p>
|
|
<Button variant="outline" asChild>
|
|
<a
|
|
className="order-3 ms-auto w-fit gap-2 md:order-none"
|
|
href={item.link}
|
|
>
|
|
<span>مشاهده پروژه</span>
|
|
<ArrowRight className="h-4 w-4 rtl:rotate-180" />
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
<Separator />
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { List2 };
|