106 lines
3.1 KiB
TypeScript
106 lines
3.1 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 }> = [
|
|
{ code: "es", name: "Español" },
|
|
{ code: "en", name: "English" },
|
|
{ code: "ca", name: "Català" },
|
|
];
|
|
|
|
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?.name}</span>
|
|
</button>
|
|
|
|
{isOpen && (
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: "100%",
|
|
right: 0,
|
|
marginTop: "0.5rem",
|
|
backgroundColor: "rgba(255, 255, 255, 0.03)",
|
|
backdropFilter: "blur(10px)",
|
|
border: "1px solid rgba(255, 255, 255, 0.08)",
|
|
borderRadius: "0.5rem",
|
|
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
|
|
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 ? "rgba(255, 255, 255, 0.05)" : "transparent",
|
|
color: "rgba(255, 255, 255, 0.7)",
|
|
cursor: "pointer",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "0.5rem",
|
|
fontSize: "0.875rem",
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
if (locale !== lang.code) {
|
|
e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.05)";
|
|
}
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
if (locale !== lang.code) {
|
|
e.currentTarget.style.backgroundColor = "transparent";
|
|
}
|
|
}}
|
|
>
|
|
<span>{lang.name}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|