92 lines
2.7 KiB
TypeScript
92 lines
2.7 KiB
TypeScript
import { Star } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface TrustStrip2Props {
|
|
rating?: number;
|
|
reviewCount?: number;
|
|
customerCount?: string;
|
|
pressLogos?: { name: string; logo?: string }[];
|
|
className?: string;
|
|
}
|
|
|
|
const DEFAULT_LOGOS = [
|
|
{ name: "Forbes" },
|
|
{ name: "TechCrunch" },
|
|
{ name: "Vogue" },
|
|
{ name: "Wired" },
|
|
{ name: "GQ" },
|
|
];
|
|
|
|
const formatRating = (value: number) =>
|
|
value.toLocaleString("fa-IR", {
|
|
minimumFractionDigits: 1,
|
|
maximumFractionDigits: 1,
|
|
});
|
|
|
|
const TrustStrip2 = ({
|
|
rating = 4.9,
|
|
reviewCount = 12500,
|
|
customerCount = "بیش از ۱ میلیون",
|
|
pressLogos = DEFAULT_LOGOS,
|
|
className,
|
|
}: TrustStrip2Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-8", className)}>
|
|
<div className="container">
|
|
<div className="flex flex-col items-center gap-6 md:flex-row md:justify-between">
|
|
<div className="flex flex-wrap items-center justify-center gap-6 md:justify-start">
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex">
|
|
{[...Array(5)].map((_, i) => (
|
|
<Star
|
|
key={i}
|
|
className={cn(
|
|
"size-5",
|
|
i < Math.floor(rating)
|
|
? "fill-amber-400 text-amber-400"
|
|
: "fill-muted text-muted",
|
|
)}
|
|
/>
|
|
))}
|
|
</div>
|
|
<span className="font-semibold">{formatRating(rating)}</span>
|
|
<span className="text-muted-foreground">
|
|
({reviewCount.toLocaleString("fa-IR")} نظر)
|
|
</span>
|
|
</div>
|
|
|
|
<div className="hidden h-6 w-px bg-border md:block" />
|
|
|
|
<p className="text-muted-foreground">
|
|
مورد اعتماد{" "}
|
|
<span className="font-semibold text-foreground">
|
|
{customerCount}
|
|
</span>{" "}
|
|
مشتری
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center justify-center gap-6">
|
|
<span className="text-sm text-muted-foreground">
|
|
منتشر شده در:
|
|
</span>
|
|
<div className="flex flex-wrap items-center justify-center gap-4">
|
|
{pressLogos.map((logo, index) => (
|
|
<span
|
|
key={index}
|
|
className="text-sm font-semibold text-muted-foreground"
|
|
>
|
|
{logo.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { TrustStrip2 };
|