62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import { Truck } from "lucide-react";
|
|
|
|
import { Progress } from "@/components/ui/progress";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface PromoBanner1Props {
|
|
threshold?: number;
|
|
currentAmount?: number;
|
|
currency?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const formatPrice = (price: number, currency = "IRR") =>
|
|
new Intl.NumberFormat("fa-IR", {
|
|
style: "currency",
|
|
currency,
|
|
}).format(price);
|
|
|
|
const PromoBanner1 = ({
|
|
threshold = 75,
|
|
currentAmount = 45,
|
|
currency = "IRR",
|
|
className,
|
|
}: PromoBanner1Props) => {
|
|
const progress = Math.min((currentAmount / threshold) * 100, 100);
|
|
const remaining = threshold - currentAmount;
|
|
const hasQualified = remaining <= 0;
|
|
|
|
return (
|
|
<div
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("w-full bg-primary text-primary-foreground", className)}
|
|
>
|
|
<div className="container flex items-center justify-center gap-3 py-2.5">
|
|
<Truck className="size-4 shrink-0" />
|
|
{hasQualified ? (
|
|
<p className="text-sm font-medium">
|
|
ارسال رایگان برای سفارش شما فعال شد!
|
|
</p>
|
|
) : (
|
|
<div className="flex items-center gap-3">
|
|
<p className="shrink-0 text-sm">
|
|
فقط{" "}
|
|
<span className="font-semibold">
|
|
{formatPrice(remaining, currency)}
|
|
</span>{" "}
|
|
تا <span className="font-semibold">ارسال رایگان</span>
|
|
</p>
|
|
<Progress
|
|
value={progress}
|
|
className="dark hidden h-1.5 w-24 sm:block"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { PromoBanner1 };
|