Price Tag

import { PriceTag } from "@/components/ui/price-tag";

export default function Example() {
  return <PriceTag />;
}

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

const PriceTag = forwardRef(({ className, price, originalPrice, currency = "$", discount, ...props }, ref) => (
  <div ref={ref} className={cn("inline-flex items-baseline gap-2", className)} {...props}>
    <span className="text-2xl font-bold">{currency}{price}</span>
    {originalPrice && <span className="text-sm text-muted-foreground line-through">{currency}{originalPrice}</span>}
    {discount && <span className="rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900 dark:text-green-300">-{discount}%</span>}
  </div>
));
PriceTag.displayName = "PriceTag";

export { PriceTag };