← back to Watches

src/components/CurrencySelector.jsx

38 lines

import React, { useState, useEffect } from 'react';
import { CURRENCIES, getCurrencyList } from '../../config/currencies.js';

const CurrencySelector = ({ value, onChange }) => {
  const [open, setOpen] = useState(false);
  const currencies = getCurrencyList();
  const current = CURRENCIES[value] || CURRENCIES.USD;

  const handleSelect = (code) => {
    localStorage.setItem('preferred_currency', code);
    onChange(code);
    setOpen(false);
  };

  return (
    <div className="relative">
      <button onClick={() => setOpen(!open)} className="flex items-center space-x-1 px-3 py-1 rounded hover:bg-gray-100">
        <span>{current.flag}</span>
        <span className="font-medium">{value}</span>
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
      </button>
      {open && (
        <div className="absolute top-full right-0 mt-1 w-48 bg-white rounded-lg shadow-lg border z-50">
          {currencies.map(c => (
            <button key={c.value} onClick={() => handleSelect(c.value)} className={`w-full px-4 py-2 text-left hover:bg-gray-100 flex items-center ${c.value === value ? 'bg-blue-50' : ''}`}>
              <span className="mr-2">{c.flag}</span>
              <span>{c.value}</span>
              <span className="ml-2 text-gray-500 text-sm">{c.name}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
};

export default CurrencySelector;