40 lines
1.5 KiB
TypeScript
40 lines
1.5 KiB
TypeScript
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Currency, useCurrency } from '@/contexts/CurrencyContext';
|
|
import { DollarSign } from 'lucide-react';
|
|
|
|
const currencies: { value: Currency; label: string; flag: string }[] = [
|
|
{ value: 'USD', label: 'USD - Dólar', flag: '🇺🇸' },
|
|
{ value: 'EUR', label: 'EUR - Euro', flag: '🇪🇺' },
|
|
{ value: 'GBP', label: 'GBP - Libra', flag: '🇬🇧' },
|
|
{ value: 'MXN', label: 'MXN - Peso Mexicano', flag: '🇲🇽' },
|
|
{ value: 'COP', label: 'COP - Peso Colombiano', flag: '🇨🇴' },
|
|
{ value: 'ARS', label: 'ARS - Peso Argentino', flag: '🇦🇷' }
|
|
];
|
|
|
|
const CurrencySelector = () => {
|
|
const { currency, setCurrency } = useCurrency();
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<DollarSign className="h-4 w-4 text-muted-foreground" />
|
|
<Select value={currency} onValueChange={(value) => setCurrency(value as Currency)}>
|
|
<SelectTrigger className="w-[180px]">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{currencies.map((curr) => (
|
|
<SelectItem key={curr.value} value={curr.value}>
|
|
<span className="flex items-center gap-2">
|
|
<span>{curr.flag}</span>
|
|
<span>{curr.label}</span>
|
|
</span>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CurrencySelector;
|