Currency Input

import { CurrencyInput } from "@/components/ui/currency-input";

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

"use client";

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

const CurrencyInput = forwardRef(({ className, currency = "$", ...props }, ref) => {
  return (
    <div className={cn("relative", className)}>
      <span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground">{currency}</span>
      <input
        ref={ref}
        type="number"
        step="0.01"
        min="0"
        placeholder="0.00"
        className="flex h-9 w-full rounded-md border border-input bg-transparent pl-7 pr-3 py-1 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
        {...props}
      />
    </div>
  );
});
CurrencyInput.displayName = "CurrencyInput";

export { CurrencyInput };