140 lines
4.5 KiB
TypeScript
140 lines
4.5 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useRef, useEffect } from 'react';
|
|
import { LOCALES, LOCALE_META, LOCALE_COOKIE, Locale } from '@/lib/locales';
|
|
import { useLocale } from '@/contexts/LocaleContext';
|
|
|
|
/**
|
|
* Locale switcher (Session 12).
|
|
*
|
|
* Compact dropdown. Mounted alongside the BETA tag in Nav. On select,
|
|
* writes the NEXT_LOCALE cookie (Path=/, 1-year expiry) and reloads
|
|
* the page so the middleware picks up the new locale and the server
|
|
* components rebuild with the new translations.
|
|
*
|
|
* SSR-safe: renders the current locale label before any state mutates
|
|
* so hydration matches.
|
|
*/
|
|
export default function LocaleSwitcher() {
|
|
const { locale } = useLocale();
|
|
const [open, setOpen] = useState(false);
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
function onDocClick(e: MouseEvent) {
|
|
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
|
|
setOpen(false);
|
|
}
|
|
}
|
|
document.addEventListener('mousedown', onDocClick);
|
|
return () => document.removeEventListener('mousedown', onDocClick);
|
|
}, [open]);
|
|
|
|
function pick(next: Locale) {
|
|
setOpen(false);
|
|
if (next === locale) return;
|
|
// 1-year cookie, root path, lax so server-side reads survive
|
|
// cross-origin navigations (Stripe redirect, OAuth callback).
|
|
const oneYear = 60 * 60 * 24 * 365;
|
|
document.cookie = `${LOCALE_COOKIE}=${next}; Path=/; Max-Age=${oneYear}; SameSite=Lax`;
|
|
// Hard reload so the middleware picks up the cookie and server
|
|
// components rebuild. Soft router.refresh() would leave the
|
|
// initial server-rendered locale stale on this page.
|
|
window.location.reload();
|
|
}
|
|
|
|
const current = LOCALE_META[locale];
|
|
|
|
return (
|
|
<div ref={containerRef} style={{ position: 'relative', display: 'inline-block' }}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen((v) => !v)}
|
|
aria-haspopup="listbox"
|
|
aria-expanded={open}
|
|
aria-label={`Language: ${current.label}`}
|
|
className="mono"
|
|
style={{
|
|
background: 'transparent',
|
|
border: '1px solid var(--border)',
|
|
color: 'var(--text-1)',
|
|
padding: '4px 8px',
|
|
fontSize: 11,
|
|
fontWeight: 700,
|
|
letterSpacing: '0.08em',
|
|
textTransform: 'uppercase',
|
|
borderRadius: 4,
|
|
cursor: 'pointer',
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: 4,
|
|
}}
|
|
>
|
|
{locale}
|
|
<span aria-hidden style={{ fontSize: 8, opacity: 0.6 }}>▾</span>
|
|
</button>
|
|
{open && (
|
|
<ul
|
|
role="listbox"
|
|
aria-label="Select language"
|
|
style={{
|
|
position: 'absolute',
|
|
top: 'calc(100% + 6px)',
|
|
right: 0,
|
|
minWidth: 180,
|
|
zIndex: 70,
|
|
background: 'var(--bg-2, #15151F)',
|
|
border: '1px solid var(--border)',
|
|
borderRadius: 6,
|
|
padding: 4,
|
|
margin: 0,
|
|
listStyle: 'none',
|
|
boxShadow: '0 12px 32px rgba(0,0,0,0.6)',
|
|
maxHeight: 320,
|
|
overflowY: 'auto',
|
|
}}
|
|
>
|
|
{LOCALES.map((code) => {
|
|
const meta = LOCALE_META[code];
|
|
const active = code === locale;
|
|
return (
|
|
<li key={code}>
|
|
<button
|
|
type="button"
|
|
role="option"
|
|
aria-selected={active}
|
|
onClick={() => pick(code)}
|
|
style={{
|
|
width: '100%',
|
|
textAlign: 'left',
|
|
background: active ? 'var(--bg-3, #1A1A26)' : 'transparent',
|
|
border: 0,
|
|
padding: '8px 10px',
|
|
cursor: 'pointer',
|
|
color: active ? 'var(--grade-a)' : 'var(--text-1)',
|
|
fontSize: 13,
|
|
borderRadius: 4,
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'baseline',
|
|
gap: 8,
|
|
}}
|
|
>
|
|
<span>{meta.native}</span>
|
|
<span
|
|
className="mono"
|
|
style={{ fontSize: 10, opacity: 0.55, letterSpacing: '0.06em' }}
|
|
>
|
|
{code.toUpperCase()}
|
|
</span>
|
|
</button>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|