49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import {
|
||
|
|
Select,
|
||
|
|
SelectContent,
|
||
|
|
SelectItem,
|
||
|
|
SelectTrigger,
|
||
|
|
SelectValue,
|
||
|
|
} from '@/components/ui/select';
|
||
|
|
import { SUPPORTED_CURRENCIES } from '@/lib/utils/currency';
|
||
|
|
|
||
|
|
interface CurrencySelectProps {
|
||
|
|
value: string | undefined;
|
||
|
|
onValueChange: (value: string) => void;
|
||
|
|
disabled?: boolean;
|
||
|
|
id?: string;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Select dropdown over the curated `SUPPORTED_CURRENCIES` list. Replaces
|
||
|
|
* the free-text `<Input maxLength={3}>` price-currency spots so reps
|
||
|
|
* can't typo "EURO" or "$$$" into a 3-letter ISO column.
|
||
|
|
*/
|
||
|
|
export function CurrencySelect({
|
||
|
|
value,
|
||
|
|
onValueChange,
|
||
|
|
disabled,
|
||
|
|
id,
|
||
|
|
className,
|
||
|
|
}: CurrencySelectProps) {
|
||
|
|
return (
|
||
|
|
<Select value={value} onValueChange={onValueChange} disabled={disabled}>
|
||
|
|
<SelectTrigger id={id} className={className}>
|
||
|
|
<SelectValue placeholder="Select currency" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
{SUPPORTED_CURRENCIES.map((c) => (
|
||
|
|
<SelectItem key={c.code} value={c.code}>
|
||
|
|
<span className="tabular-nums mr-2">{c.symbol}</span>
|
||
|
|
<span className="font-medium">{c.code}</span>
|
||
|
|
<span className="text-muted-foreground ml-2 text-xs">{c.label}</span>
|
||
|
|
</SelectItem>
|
||
|
|
))}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
);
|
||
|
|
}
|