添加语言选择栏“

app/[locale]/page.tsx

@@ -5,11 +5,16 @@ import { IconArrowRight } from "@tabler/icons-react"
 import { useTheme } from "next-themes"
 import Link from "next/link"
 
+import { LanguageSwitcher } from '@/components/ui/language-switcher'
+
 export default function HomePage() {
   const { theme } = useTheme()
 
   return (
-    <div className="flex size-full flex-col items-center justify-center">
+    <div className="flex size-full flex-col items-center justify-center relative">
+
+      <LanguageSwitcher />
+
       <div>
         <ChatbotUISVG theme={theme === "dark" ? "dark" : "light"} scale={0.3} />
       </div>

components/ui/language-switcher.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import i18nConfig from '@/i18nConfig'
+import { usePathname, useRouter } from 'next/navigation'
+import { useTransition } from 'react'
+import { Globe } from 'lucide-react'
+
+export function LanguageSwitcher() {
+  const router = useRouter()
+  const pathname = usePathname()
+  const [isPending, startTransition] = useTransition()
+
+  const currentLocale = pathname.split('/')[1] || i18nConfig.defaultLocale
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newLocale = e.target.value
+    const segments = pathname.split('/')
+    segments[1] = newLocale
+    const newPath = segments.join('/')
+
+    startTransition(() => {
+      router.push(newPath)
+    })
+  }
+
+  return (
+    <div className="absolute top-4 right-4 z-50 flex items-center gap-2">
+      <Globe size={18} className="text-muted-foreground" />
+      <select
+        className="rounded-md border px-2 py-1 text-sm bg-background text-foreground"
+        value={currentLocale}
+        onChange={handleChange}
+        disabled={isPending}
+      >
+        {i18nConfig.locales.map(locale => (
+          <option key={locale} value={locale}>
+            {i18nConfig.languageNames[locale] || locale.toUpperCase()}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}

i18nConfig.js

@@ -1,25 +0,0 @@
-const i18nConfig = {
-  defaultLocale: "en",
-  locales: [
-    "ar",
-    "bn",
-    "de",
-    "en",
-    "es",
-    "fr",
-    "he",
-    "id",
-    "it",
-    "ja",
-    "ko",
-    "pt",
-    "ru",
-    "si",
-    "sv",
-    "te",
-    "vi",
-    "zh"
-  ]
-}
-
-module.exports = i18nConfig

i18nConfig.ts

@@ -0,0 +1,30 @@
+const i18nConfig = {
+  defaultLocale: 'en',
+  locales: [
+    'ar', 'bn', 'de', 'en', 'es', 'fr',
+    'he', 'id', 'it', 'ja', 'ko', 'pt',
+    'ru', 'si', 'sv', 'te', 'vi', 'zh'
+  ],
+  languageNames: {
+    ar: 'العربية',
+    bn: 'বাংলা',
+    de: 'Deutsch',
+    en: 'English',
+    es: 'Español',
+    fr: 'Français',
+    he: 'עברית',
+    id: 'Bahasa Indonesia',
+    it: 'Italiano',
+    ja: '日本語',
+    ko: '한국어',
+    pt: 'Português',
+    ru: 'Русский',
+    si: 'සිංහල',
+    sv: 'Svenska',
+    te: 'తెలుగు',
+    vi: 'Tiếng Việt',
+    zh: '中文'
+  }
+} as const
+
+export default i18nConfig

tsconfig.json

@@ -28,7 +28,7 @@
     "**/*.tsx",
     ".next/types/**/*.ts",
     "./.next/types/**/*.ts",
-    "i18nConfig.js"
+    "i18nConfig.ts"
   ],
   "exclude": ["node_modules"]
 }