106 lines
3 KiB
TypeScript
106 lines
3 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useState, useRef, useEffect } from "react";
|
||
|
|
import { useLanguage, type Locale } from "../hooks/useLanguage";
|
||
|
|
import { sharedStyles } from "../styles/shared";
|
||
|
|
|
||
|
|
const LANGUAGES: Array<{ code: Locale; name: string; flag: string }> = [
|
||
|
|
{ code: "es", name: "Español", flag: "🇪🇸" },
|
||
|
|
{ code: "en", name: "English", flag: "🇬🇧" },
|
||
|
|
{ code: "ca", name: "Català", flag: "🇪🇸" },
|
||
|
|
];
|
||
|
|
|
||
|
|
export function LanguageSelector() {
|
||
|
|
const { locale, setLocale } = useLanguage();
|
||
|
|
const [isOpen, setIsOpen] = useState(false);
|
||
|
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const handleClickOutside = (event: MouseEvent) => {
|
||
|
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||
|
|
setIsOpen(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if (isOpen) {
|
||
|
|
document.addEventListener("mousedown", handleClickOutside);
|
||
|
|
}
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
||
|
|
};
|
||
|
|
}, [isOpen]);
|
||
|
|
|
||
|
|
const currentLanguage = LANGUAGES.find((lang) => lang.code === locale);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div ref={dropdownRef} style={{ position: "relative" }}>
|
||
|
|
<button
|
||
|
|
onClick={() => setIsOpen(!isOpen)}
|
||
|
|
style={{
|
||
|
|
...sharedStyles.logoutBtn,
|
||
|
|
marginRight: "0.75rem",
|
||
|
|
display: "flex",
|
||
|
|
alignItems: "center",
|
||
|
|
gap: "0.5rem",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<span>{currentLanguage?.flag}</span>
|
||
|
|
<span>{currentLanguage?.name}</span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{isOpen && (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
position: "absolute",
|
||
|
|
top: "100%",
|
||
|
|
right: 0,
|
||
|
|
marginTop: "0.5rem",
|
||
|
|
backgroundColor: "white",
|
||
|
|
border: "1px solid #e5e7eb",
|
||
|
|
borderRadius: "0.5rem",
|
||
|
|
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
|
||
|
|
zIndex: 1000,
|
||
|
|
minWidth: "150px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{LANGUAGES.map((lang) => (
|
||
|
|
<button
|
||
|
|
key={lang.code}
|
||
|
|
onClick={() => {
|
||
|
|
setLocale(lang.code);
|
||
|
|
setIsOpen(false);
|
||
|
|
}}
|
||
|
|
style={{
|
||
|
|
width: "100%",
|
||
|
|
padding: "0.75rem 1rem",
|
||
|
|
textAlign: "left",
|
||
|
|
border: "none",
|
||
|
|
backgroundColor: locale === lang.code ? "#f3f4f6" : "transparent",
|
||
|
|
cursor: "pointer",
|
||
|
|
display: "flex",
|
||
|
|
alignItems: "center",
|
||
|
|
gap: "0.5rem",
|
||
|
|
fontSize: "0.875rem",
|
||
|
|
}}
|
||
|
|
onMouseEnter={(e) => {
|
||
|
|
if (locale !== lang.code) {
|
||
|
|
e.currentTarget.style.backgroundColor = "#f9fafb";
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
onMouseLeave={(e) => {
|
||
|
|
if (locale !== lang.code) {
|
||
|
|
e.currentTarget.style.backgroundColor = "transparent";
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<span>{lang.flag}</span>
|
||
|
|
<span>{lang.name}</span>
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|