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

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

const priceTagVariants = cva("inline-flex items-baseline gap-2", {
  variants: {
    size: {
      sm: "text-sm",
      md: "text-base",
      lg: "text-xl",
    },
  },
  defaultVariants: {
    size: "md",
  },
});

export interface PriceTagProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof priceTagVariants> {
  price: number | string;
  originalPrice?: number | string;
  currency?: string;
  showSaleBadge?: boolean;
  saleLabel?: string;
}

const originalPriceSizes: Record<
  NonNullable<PriceTagProps["size"]>,
  string
> = {
  sm: "text-xs",
  md: "text-sm",
  lg: "text-base",
};

function formatAmount(value: number | string) {
  if (typeof value === "number") {
    return value.toLocaleString(undefined, {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    });
  }

  return value;
}

export function PriceTag({
  price,
  originalPrice,
  currency = "$",
  showSaleBadge = false,
  saleLabel = "Sale",
  size,
  className,
  ...props
}: PriceTagProps) {
  const formattedPrice = `${currency}${formatAmount(price)}`;
  const formattedOriginal =
    originalPrice !== undefined
      ? `${currency}${formatAmount(originalPrice)}`
      : null;
  const originalSize = originalPriceSizes[size ?? "md"];

  return (
    <div className={cn(priceTagVariants({ size, className }))} {...props}>
      {showSaleBadge ? (
        <span className="rounded-full border border-border bg-muted px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
          {saleLabel}
        </span>
      ) : null}
      <span className="font-semibold text-primary">{formattedPrice}</span>
      {formattedOriginal ? (
        <span
          className={cn(
            "font-medium text-muted-foreground line-through",
            originalSize
          )}
        >
          {formattedOriginal}
        </span>
      ) : null}
    </div>
  );
}
Price Tag

Dependencies

Files

Installation
