Optimize landing server rendering

2026-05-30 23:43:07 +08:00
parent 30e9513ce2
commit bf0fbe1b1d
9 changed files with 526 additions and 216 deletions
@@ -0,0 +1,48 @@
+"use client";
+
+import { useTransition } from "react";
+import { useRouter } from "next/navigation";
+import {
+  LANDING_LOCALE_COOKIE,
+  nextLandingLocale,
+  type LandingLocale,
+} from "@/components/landing/landingLocale";
+
+const ONE_YEAR_SECONDS = 60 * 60 * 24 * 365;
+
+export function LandingLocaleToggle({ locale }: { locale: LandingLocale }) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const isEn = locale === "en-US";
+
+  const toggleLocale = () => {
+    const nextLocale = nextLandingLocale(locale);
+    document.cookie = `${LANDING_LOCALE_COOKIE}=${nextLocale}; Max-Age=${ONE_YEAR_SECONDS}; Path=/; SameSite=Lax`;
+    document.documentElement.lang = nextLocale;
+    try {
+      window.localStorage.setItem(LANDING_LOCALE_COOKIE, nextLocale);
+    } catch {
+      // Locale persistence is best-effort; the cookie is enough for SSR.
+    }
+    startTransition(() => {
+      router.refresh();
+    });
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={toggleLocale}
+      disabled={isPending}
+      className="inline-flex h-9 cursor-pointer items-center gap-1 rounded-md border border-slate-200 bg-white px-1 text-xs font-semibold text-slate-500 shadow-sm hover:border-slate-300 disabled:cursor-wait disabled:opacity-70"
+      aria-label={isEn ? "Switch language" : "切换语言"}
+    >
+      <span className={`rounded px-2 py-1 ${!isEn ? "bg-slate-900 text-white" : ""}`}>
+        中
+      </span>
+      <span className={`rounded px-2 py-1 ${isEn ? "bg-slate-900 text-white" : ""}`}>
+        EN
+      </span>
+    </button>
+  );
+}