chore: setup project for production
This commit is contained in:
51
components/dynamic-navbar/currencySelect.jsx
Normal file
51
components/dynamic-navbar/currencySelect.jsx
Normal file
@@ -0,0 +1,51 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user