leadstocompany/rudarksh-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improvements in UI and book consultion option

Browse Source 
- Login is not responsive
- Add country field in book consultant any country
- correct form submit of book consultant in mobile view
- updatr email in privacy page
- make home page slider responsive
- redirect login whentokenexpired
This commit is contained in:
Tariq Jamal A
2025-05-09 20:09:27 +05:30
parent 8050065359
commit 7e33e61d65
11 changed files with 405 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
components/dynamic-navbar/currencySelect.jsx
View File

@@ -1,43 +1,88 @@
import React, { useState } from 'react';
import { ChevronDown } from 'lucide-react';
import React, { useState, useEffect } from 'react';
import { ChevronDown, AlertCircle } from 'lucide-react';
const CurrencySelect = ({ selectedCurrency, setSelectedCurrency, SUPPORTED_CURRENCIES }) => {
const CurrencySelect = ({ selectedCurrency, setSelectedCurrency, SUPPORTED_CURRENCIES, error }) => {
const [isOpen, setIsOpen] = useState(false);
const [isMobile, setIsMobile] = useState(false);
const [selectedCurrencyName, setSelectedCurrencyName] = useState('');
useEffect(() => {
const savedCurrency = localStorage.getItem('selectedCurrency');
if (savedCurrency && SUPPORTED_CURRENCIES[savedCurrency]) {
setSelectedCurrency(savedCurrency);
}
setSelectedCurrencyName(SUPPORTED_CURRENCIES[selectedCurrency]?.country || '');
const checkMobile = () => {
setIsMobile(window.innerWidth < 768);
};
checkMobile();
window.addEventListener('resize', checkMobile);
return () => window.removeEventListener('resize', checkMobile);
}, [SUPPORTED_CURRENCIES, setSelectedCurrency]);
useEffect(() => {
setSelectedCurrencyName(SUPPORTED_CURRENCIES[selectedCurrency]?.country || '');
}, [selectedCurrency, SUPPORTED_CURRENCIES]);
const handleCurrencyChange = (code) => {
localStorage.setItem('selectedCurrency', code);
setSelectedCurrency(code);
setSelectedCurrencyName(SUPPORTED_CURRENCIES[code]?.country || '');
setIsOpen(false);
};
return (
<div className="relative w-32">
<div className="relative w-auto md: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
className={`w-full px-2 md:px-4 py-2 md:py-2.5 bg-white border border-gray-200 rounded-lg shadow-sm
flex items-center justify-between text-sm font-medium
hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500
transition-all duration-200 group"
transition-all duration-200 group
${error && selectedCurrency !== 'INR' ? 'text-amber-600' : 'text-gray-700'}`}
>
{SUPPORTED_CURRENCIES[selectedCurrency]?.country}
{isMobile ? (
<span className="text-base font-medium">
{SUPPORTED_CURRENCIES[selectedCurrency]?.symbol || ''}
{error && selectedCurrency !== 'INR' && (
<AlertCircle className="inline ml-1 w-3 h-3" />
)}
</span>
) : (
<>
{SUPPORTED_CURRENCIES[selectedCurrency]?.country}
{error && selectedCurrency !== 'INR' && (
<AlertCircle className="inline ml-1 w-3 h-3" />
)}
</>
)}
<ChevronDown
className={`w-4 h-4 text-gray-400 transition-transform duration-200
className={`w-4 h-4 ml-1 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
className="absolute right-0 w-48 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 }]) => (
{Object.entries(SUPPORTED_CURRENCIES).map(([code, { country, symbol }]) => (
<button
key={code}
onClick={() => {
setSelectedCurrency(code);
setIsOpen(false);
}}
onClick={() => handleCurrencyChange(code)}
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'}`}
>
<span className="mr-2">{symbol}</span>
{country}
</button>
))}
@@ -47,5 +92,4 @@ const CurrencySelect = ({ selectedCurrency, setSelectedCurrency, SUPPORTED_CURRE
</div>
);
};
export default CurrencySelect;