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 72 73 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | "use client";
import { cn } from "@/lib/core";
type SaleBadgeVariant = "sale" | "flash" | "clearance" | "new" | "limited" | "bogo";
type SaleBadgeSize = "sm" | "md" | "lg";
interface SaleBadgeProps {
variant?: SaleBadgeVariant;
size?: SaleBadgeSize;
label?: string;
discountPercent?: number;
countdown?: {
hours: number;
minutes: number;
seconds: number;
};
className?: string;
}
const variantStyles: Record<SaleBadgeVariant, string> = {
sale: "bg-red-500 text-white",
flash: "bg-orange-500 text-white animate-pulse",
clearance: "bg-yellow-500 text-black",
new: "bg-green-500 text-white",
limited: "bg-purple-500 text-white",
bogo: "bg-blue-500 text-white"};
const sizeStyles: Record<SaleBadgeSize, string> = {
sm: "text-xs px-1.5 py-0.5",
md: "text-sm px-2 py-1",
lg: "text-base px-3 py-1.5"};
const defaultLabels: Record<SaleBadgeVariant, string> = {
sale: "SALE",
flash: "FLASH SALE",
clearance: "CLEARANCE",
new: "NEW",
limited: "LIMITED",
bogo: "BOGO"};
export function SaleBadge({
variant = "sale",
size = "md",
label,
discountPercent,
countdown,
className}: SaleBadgeProps) {
const displayLabel = label || (discountPercent ? `${discountPercent}% OFF` : defaultLabels[variant]);
return (
<span
className={cn(
"inline-flex items-center gap-1 font-bold uppercase rounded",
variantStyles[variant],
sizeStyles[size],
className
)}
>
{displayLabel}
{countdown && (
<span className="font-mono ml-1">
{String(countdown.hours).padStart(2, "0")}:
{String(countdown.minutes).padStart(2, "0")}:
{String(countdown.seconds).padStart(2, "0")}
</span>
)}
</span>
);
}
export default SaleBadge;
|