Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | "use client";
import { Icon } from "@/components/ui/icons";
import { cn } from "@/lib/core";
interface FreeShippingProgressProps {
currentTotal: number;
threshold: number;
isQualified?: boolean;
className?: string;
}
export function FreeShippingProgress({
currentTotal,
threshold,
isQualified = false,
className}: FreeShippingProgressProps) {
const remaining = Math.max(0, threshold - currentTotal);
const progress = Math.min(100, (currentTotal / threshold) * 100);
const formatCurrency = (amount: number) => {
return new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD"}).format(amount);
};
if (isQualified || remaining === 0) {
return (
<div
className={cn(
"flex items-center gap-2 p-3 bg-green-50 border border-green-200 rounded-lg",
className
)}
>
<Icon name="package" size={20} className="text-green-600" />
<span className="text-sm font-medium text-green-800">
You qualify for FREE shipping!
</span>
<Icon name="check-circle" size={16} className="text-green-600 ml-auto" />
</div>
);
}
return (
<div className={cn("p-3 bg-blue-50 border border-blue-200 rounded-lg", className)}>
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2">
<Icon name="package" size={18} className="text-blue-600" />
<span className="text-sm text-blue-800">
Add <span className="font-bold">{formatCurrency(remaining)}</span> more for FREE shipping
</span>
</div>
</div>
<div className="w-full bg-blue-200 rounded-full h-2 overflow-hidden">
<div
className="bg-blue-600 h-full rounded-full transition-all duration-300"
style={{ width: `${progress}%` }}
/>
</div>
<div className="flex justify-between mt-1 text-xs text-blue-600">
<span>{formatCurrency(currentTotal)}</span>
<span>{formatCurrency(threshold)}</span>
</div>
</div>
);
}
export default FreeShippingProgress;
|