make translate for login, register pages

2025-12-10 16:39:13 +07:00
parent d9c26b079d
commit f281c13f87
31 changed files with 830 additions and 103 deletions
@@ -0,0 +1,85 @@
+'use client'
+
+import { useLocale } from 'next-intl'
+import { usePathname, useRouter } from '@/i18n/navigation'
+import { routing } from '@/i18n/routing'
+import { useState, useRef, useEffect } from 'react'
+import { useClickOutside } from '@/app/hooks/useClickOutside';
+
+export default function LanguageSwitcher() {
+	const locale = useLocale()
+	const router = useRouter()
+	const pathname = usePathname()
+	const [isOpen, setIsOpen] = useState(false)
+	const dropdownRef = useRef<HTMLDivElement>(null)
+
+	const switchLanguage = (newLocale: string) => {
+		router.replace(pathname, { locale: newLocale })
+		setIsOpen(false)
+	}
+
+	useClickOutside(dropdownRef, () => {
+		setIsOpen(false);
+	});
+
+	useEffect(() => {
+		const handleEscape = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') setIsOpen(false)
+		}
+
+		document.addEventListener('keydown', handleEscape)
+		return () => document.removeEventListener('keydown', handleEscape)
+	}, []);
+
+	return (
+		<div className="relative" ref={dropdownRef}>
+			<button
+				onClick={() => setIsOpen(!isOpen)}
+				className="flex items-center justify-between w-full px-4 py-2 text-sm font-medium text-[#6366f1] bg-white border-2 border-[#6366f1] rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+				aria-haspopup="listbox"
+				aria-expanded={isOpen}
+			>
+				<span className="flex items-center">
+					<span className="mr-2">{locale === 'ru' ? 'РУ' : locale.toUpperCase()}</span>
+				</span>
+				<svg
+					className={`w-5 h-5 ml-2 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+				>
+					<path
+						fillRule="evenodd"
+						d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+						clipRule="evenodd"
+					/>
+				</svg>
+			</button>
+
+			{isOpen && (
+				<div className="absolute right-0 z-10 w-full mt-2 origin-top-right bg-white rounded-md shadow-lg border-2 border-[#6366f1] focus:outline-none">
+					<ul
+						className="py-1"
+						role="listbox"
+						aria-labelledby="language-selector"
+					>
+						{routing.locales.map((lang) => (
+							<li key={lang} role="option">
+								<button
+									onClick={() => switchLanguage(lang)}
+									className={`flex items-center w-full px-4 py-2 text-sm text-left hover:bg-blue-100 ${locale === lang ? 'bg-blue-50 text-blue-600 font-medium' : 'text-[#6366f1]'
+										}`}
+									role="menuitem"
+								>
+									<span className="mr-2 font-medium">
+										{lang === 'ru' ? 'РУ' : lang.toUpperCase()}
+									</span>
+								</button>
+							</li>
+						))}
+					</ul>
+				</div>
+			)}
+		</div>
+	)
+}