disable language toggle when no t function available

yeecord · Apr 26, 2024 · 6329cb9 · 6329cb9
1 parent ded4e84
commit 6329cb9
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 11 deletions.
diff --git a/src/components/header.astro b/src/components/header.astro
@@ -3,10 +3,10 @@ import { HeaderMenu } from "./header-menu";
 import { Image } from "astro:assets";
 import logo from "@/assets/logo.png";
 import { ThemeToggle } from "./theme-toggle";
-import { TranslateFunction } from "../utils/language";
+import { createTranslation, TranslateFunction } from "../utils/language";
 import { LanguageSelect } from "./language-select";
 
-const t = Astro.props.t as TranslateFunction;
+const t = (Astro.props.t as TranslateFunction) ?? createTranslation("zh-tw");
 
 const url = new URL(Astro.url);
 
@@ -29,7 +29,12 @@ const code = t("code");
       <span class="font-medium">{t("global.header.title")}</span>
     </a>
     <div class="flex-grow"></div>
-    <LanguageSelect path={url.pathname} code={code} client:load />
+    <LanguageSelect
+      path={url.pathname}
+      disabled={!Astro.props.t}
+      code={code}
+      client:load
+    />
     <ThemeToggle client:visible />
     <HeaderMenu />
   </nav>

diff --git a/src/components/language-select.tsx b/src/components/language-select.tsx
@@ -11,12 +11,14 @@ import type { FC } from "react";
 export const LanguageSelect: FC<{
   code: string;
   path: string;
-}> = ({ code, path }) => {
+  disabled?: boolean;
+}> = ({ code, path, disabled }) => {
   if (path.endsWith("/")) path = path.slice(0, -1);
 
   return (
     <Select
       value={code}
+      disabled={disabled}
       onValueChange={(lang) => (location.href = `/${lang}${path}`)}
     >
       <SelectTrigger

diff --git a/src/layouts/base-layout.astro b/src/layouts/base-layout.astro
@@ -6,6 +6,7 @@ import { ImageMetadata } from "astro";
 import logo from "@/assets/logo.png";
 import { cn } from "@/utils/cn";
 import { TranslateFunction } from "@/utils/language";
+import { createTranslation } from "../utils/language";
 
 interface Props {
   title: string;
@@ -15,12 +16,13 @@ interface Props {
   t: TranslateFunction;
 }
 
+const t = (Astro.props.t as TranslateFunction) ?? createTranslation("zh-tw");
+
 const {
   title,
-  description = Astro.props.t("global.description"),
+  description = t("global.description"),
   icon,
   class: className,
-  t,
 } = Astro.props;
 
 const suffix = t("global.title");
@@ -79,7 +81,7 @@ const themeScript = `!function e(){let t=localStorage.getItem("theme");!t&&windo
       crossorigin="anonymous"></script>
   </head>
   <body>
-    <Header {t} />
+    <Header t={Astro.props.t} />
   </body>
   <div class={cn("mb-8 md:mb-4 container", className)}>
     <slot />

diff --git a/src/pages/zh-tw/address-to-english.astro b/src/pages/zh-tw/address-to-english.astro
@@ -1,15 +1,11 @@
 ---
 import BaseLayout from "../../layouts/base-layout.astro";
-import { createTranslation } from "../../utils/language";
 import Adsense from "../../components/adsense.astro";
 export { getStaticPaths } from "../../utils/language";
 import { AddressToEnglishInput } from "../../components/address-to-english-input";
-
-const t = createTranslation("zh-tw");
 ---
 
 <BaseLayout
-  {t}
   title="台灣中華郵政地址轉英文"
   description="輸入臺灣地址轉為英文格式，支援中文、全形數字轉換"
 >