"use client";

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const saleBadgeVariants = cva(
  "absolute inline-flex items-center justify-center font-semibold uppercase tracking-wide",
  {
    variants: {
      position: {
        "top-left": "left-0 top-0 rounded-br-lg rounded-tl-lg",
        "top-right": "right-0 top-0 rounded-bl-lg rounded-tr-lg",
        "bottom-left": "bottom-0 left-0 rounded-bl-lg rounded-tr-lg",
        "bottom-right": "bottom-0 right-0 rounded-br-lg rounded-tl-lg",
      },
      size: {
        sm: "px-2 py-1 text-[10px]",
        md: "px-3 py-1.5 text-xs",
        lg: "px-4 py-2 text-sm",
      },
    },
    defaultVariants: {
      position: "top-left",
      size: "md",
    },
  }
);

export interface SaleBadgeProps
  extends React.HTMLAttributes<HTMLSpanElement>,
    VariantProps<typeof saleBadgeVariants> {
  label?: string;
  discountPercent?: number;
}

export function SaleBadge({
  label,
  discountPercent,
  position,
  size,
  className,
  ...props
}: SaleBadgeProps) {
  const displayText = React.useMemo(() => {
    if (label) return label;
    if (discountPercent !== undefined && discountPercent > 0) {
      return `${Math.round(discountPercent)}% Off`;
    }
    return "Sale";
  }, [label, discountPercent]);

  return (
    <span
      className={cn(
        saleBadgeVariants({ position, size }),
        "border border-border bg-muted text-foreground",
        className
      )}
      {...props}
    >
      {displayText}
    </span>
  );
}
Sale Badge

Dependencies

Files

Installation
