96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
import {
|
|
BadgeCheck,
|
|
Headphones,
|
|
RotateCcw,
|
|
Shield,
|
|
Star,
|
|
Truck,
|
|
} from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface TrustStrip4Props {
|
|
rating?: number;
|
|
reviewCount?: number;
|
|
className?: string;
|
|
}
|
|
|
|
const formatRating = (value: number) =>
|
|
value.toLocaleString("fa-IR", {
|
|
minimumFractionDigits: 1,
|
|
maximumFractionDigits: 1,
|
|
});
|
|
|
|
const FEATURES = [
|
|
{
|
|
icon: <Truck className="size-4" />,
|
|
text: "ارسال رایگان برای سفارشهای بالای ۷۵ ریال",
|
|
},
|
|
{
|
|
icon: <RotateCcw className="size-4" />,
|
|
text: "مرجوعی رایگان تا ۳۰ روز",
|
|
},
|
|
{ icon: <Shield className="size-4" />, text: "گارانتی ۲ ساله" },
|
|
{ icon: <Headphones className="size-4" />, text: "پشتیبانی ۲۴/۷" },
|
|
];
|
|
|
|
const TrustStrip4 = ({
|
|
rating = 4.8,
|
|
reviewCount = 25000,
|
|
className,
|
|
}: TrustStrip4Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("bg-muted/50 py-4", className)}>
|
|
<div className="container">
|
|
<div className="flex flex-col items-center justify-between gap-4 md:flex-row">
|
|
<div className="flex flex-wrap items-center justify-center gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex">
|
|
{[...Array(5)].map((_, i) => (
|
|
<Star
|
|
key={i}
|
|
className={cn(
|
|
"size-4",
|
|
i < Math.floor(rating)
|
|
? "fill-amber-400 text-amber-400"
|
|
: "fill-muted text-muted",
|
|
)}
|
|
/>
|
|
))}
|
|
</div>
|
|
<span className="text-sm font-semibold">
|
|
{formatRating(rating)}
|
|
</span>
|
|
</div>
|
|
<Separator orientation="vertical" className="hidden h-4 sm:block" />
|
|
<span className="text-sm text-muted-foreground">
|
|
بیش از {reviewCount.toLocaleString("fa-IR")} نظر تأییدشده
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center justify-center gap-4 md:gap-6">
|
|
{FEATURES.map((feature, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-center gap-1.5 text-sm text-muted-foreground"
|
|
>
|
|
{feature.icon}
|
|
<span>{feature.text}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<Badge variant="secondary" className="gap-1.5">
|
|
<BadgeCheck className="size-3.5 text-emerald-600" />
|
|
فروشنده تأییدشده
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { TrustStrip4 };
|