95 lines
3.1 KiB
TypeScript
95 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import { useLocale } from "~/components/locale-provider";
|
|
import type { Locale } from "~/lib/i18n";
|
|
|
|
const OPTIONS: { value: Locale; label: string }[] = [
|
|
{ value: "zh", label: "中文" },
|
|
{ value: "en", label: "English" },
|
|
];
|
|
|
|
const UNLOCK_CLICKS = 5;
|
|
const CLICK_WINDOW_MS = 2500;
|
|
const UNLOCK_KEY = "nomadro-lang-unlock";
|
|
|
|
export function LanguageSwitcher({ className = "" }: { className?: string }) {
|
|
const { locale, setLocale, t } = useLocale();
|
|
const [visible, setVisible] = useState(false);
|
|
const clicksRef = useRef(0);
|
|
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
|
|
useEffect(() => {
|
|
try {
|
|
if (window.sessionStorage.getItem(UNLOCK_KEY) === "1") {
|
|
setVisible(true);
|
|
}
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}, []);
|
|
|
|
const handleSecretClick = useCallback(() => {
|
|
if (visible) return;
|
|
|
|
clicksRef.current += 1;
|
|
|
|
if (timerRef.current) clearTimeout(timerRef.current);
|
|
timerRef.current = setTimeout(() => {
|
|
clicksRef.current = 0;
|
|
}, CLICK_WINDOW_MS);
|
|
|
|
if (clicksRef.current >= UNLOCK_CLICKS) {
|
|
clicksRef.current = 0;
|
|
if (timerRef.current) clearTimeout(timerRef.current);
|
|
setVisible(true);
|
|
try {
|
|
window.sessionStorage.setItem(UNLOCK_KEY, "1");
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}
|
|
}, [visible]);
|
|
|
|
return (
|
|
<div
|
|
className={`absolute right-0 z-10 ${className}`}
|
|
style={{ top: "max(0.5rem, var(--safe-top))" }}
|
|
>
|
|
{/* Invisible hit area — tap 5 times to reveal */}
|
|
<button
|
|
type="button"
|
|
aria-hidden={!visible}
|
|
tabIndex={-1}
|
|
onClick={handleSecretClick}
|
|
className="absolute right-0 top-0 h-12 w-16 cursor-default border-0 bg-transparent p-0"
|
|
style={{ opacity: 0 }}
|
|
/>
|
|
|
|
{visible ? (
|
|
<label className="relative z-10 mr-4 mt-2 inline-flex items-center gap-2 text-xs text-neutral-500">
|
|
<span className="sr-only">{t.languageLabel}</span>
|
|
<select
|
|
value={locale}
|
|
onChange={(event) => setLocale(event.target.value as Locale)}
|
|
aria-label={t.languageLabel}
|
|
className="appearance-none rounded-lg border border-neutral-200 bg-white px-2.5 py-1.5 pr-7 text-xs font-medium text-neutral-700 shadow-sm outline-none transition hover:border-neutral-300 focus:border-neutral-400"
|
|
style={{
|
|
backgroundImage:
|
|
"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\")",
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundPosition: "right 0.55rem center",
|
|
}}
|
|
>
|
|
{OPTIONS.map((option) => (
|
|
<option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|