Refactor sidebar navigation

src/components/CurrencySelector.tsx

@@ -0,0 +1,39 @@
+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;