74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
import { RotateCcw, Shield, Star, Truck } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface TrustItem {
|
|
icon: React.ReactNode;
|
|
title: string;
|
|
description?: string;
|
|
}
|
|
|
|
interface TrustStrip1Props {
|
|
items?: TrustItem[];
|
|
className?: string;
|
|
}
|
|
|
|
const DEFAULT_ITEMS: TrustItem[] = [
|
|
{
|
|
icon: <Truck className="size-5" />,
|
|
title: "ارسال رایگان",
|
|
description: "برای سفارشهای بالای ۵۰ دلار",
|
|
},
|
|
{
|
|
icon: <RotateCcw className="size-5" />,
|
|
title: "مرجوعی آسان",
|
|
description: "ضمانت بازگشت ۳۰ روزه",
|
|
},
|
|
{
|
|
icon: <Shield className="size-5" />,
|
|
title: "پرداخت امن",
|
|
description: "تراکنش ۱۰۰٪ محافظتشده",
|
|
},
|
|
{
|
|
icon: <Star className="size-5" />,
|
|
title: "امتیاز ۴٫۹ از ۵",
|
|
description: "از بیش از ۱۰٬۰۰۰ نظر",
|
|
},
|
|
];
|
|
|
|
const TrustStrip1 = ({
|
|
items = DEFAULT_ITEMS,
|
|
className,
|
|
}: TrustStrip1Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("border-y bg-muted/30 py-6", className)}
|
|
>
|
|
<div className="container">
|
|
<div className="grid grid-cols-2 gap-6 md:grid-cols-4">
|
|
{items.map((item, index) => (
|
|
<div key={index} className="flex items-center gap-3">
|
|
<div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
|
|
{item.icon}
|
|
</div>
|
|
<div className="text-start">
|
|
<p className="leading-tight font-medium">{item.title}</p>
|
|
{item.description && (
|
|
<p className="text-sm text-muted-foreground">
|
|
{item.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { TrustStrip1 };
|