51 lines
2.0 KiB
JavaScript
51 lines
2.0 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { ChevronDown } from 'lucide-react';
|
|
|
|
const CurrencySelect = ({ selectedCurrency, setSelectedCurrency, SUPPORTED_CURRENCIES }) => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="relative w-32">
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-lg shadow-sm
|
|
flex items-center justify-between text-gray-700 text-sm font-medium
|
|
hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500
|
|
transition-all duration-200 group"
|
|
>
|
|
{SUPPORTED_CURRENCIES[selectedCurrency]?.country}
|
|
<ChevronDown
|
|
className={`w-4 h-4 text-gray-400 transition-transform duration-200
|
|
${isOpen ? 'rotate-180' : ''} group-hover:text-gray-600`}
|
|
/>
|
|
</button>
|
|
|
|
{isOpen && (
|
|
<div
|
|
className="absolute w-full mt-2 bg-white border border-gray-200 rounded-lg shadow-lg
|
|
overflow-hidden z-50 animate-in fade-in slide-in-from-top-2 duration-200"
|
|
>
|
|
<div className="max-h-60 overflow-auto scrollbar-thin scrollbar-thumb-gray-200 hover:scrollbar-thumb-gray-300">
|
|
{Object.entries(SUPPORTED_CURRENCIES).map(([code, { country }]) => (
|
|
<button
|
|
key={code}
|
|
onClick={() => {
|
|
setSelectedCurrency(code);
|
|
setIsOpen(false);
|
|
}}
|
|
className={`w-full px-4 py-2.5 text-left text-sm transition-colors duration-150
|
|
hover:bg-gray-50 focus:outline-none focus:bg-gray-50
|
|
${selectedCurrency === code ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-700'}
|
|
${selectedCurrency === code ? 'hover:bg-blue-50' : 'hover:bg-gray-50'}`}
|
|
>
|
|
{country}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CurrencySelect; |