"use client";

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

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

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

export interface PriceDisplayProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof priceDisplayVariants> {
  price: number | string;
  originalPrice?: number | string;
  currency?: string;
  locale?: string;
}

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

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

export function PriceDisplay({
  price,
  originalPrice,
  currency = "$",
  locale,
  size,
  className,
  ...props
}: PriceDisplayProps) {
  const formattedPrice = `${currency}${formatAmount(price, locale)}`;
  const formattedOriginal =
    originalPrice !== undefined
      ? `${currency}${formatAmount(originalPrice, locale)}`
      : null;
  const originalSize = originalPriceSizes[size ?? "md"];

  return (
    <div className={cn(priceDisplayVariants({ size, className }))} {...props}>
      <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 Display

Dependencies

Files

Installation
