feat: enhance locale switching with Radix UI Select and Zustand store

- Add Radix UI Select component for improved locale selection - Create Zustand store for managing current locale state - Update navbar and mobile navbar to use new LocaleSelector - Remove deprecated LocaleSwitcher and LocaleSwitcherSelect components - Update routing configuration with emoji flags for locales - Add deepmerge and Zustand dependencies to package.json
2025-03-03 00:54:33 +08:00 · 2025-03-03 00:54:33 +08:00 · 579885393b
commit 579885393b
parent 851bbabd71
14 changed files with 352 additions and 138 deletions
--- a/package.json
+++ b/package.json
@ -21,6 +21,7 @@
    "@radix-ui/react-label": "^2.1.2",
    "@radix-ui/react-navigation-menu": "^1.2.5",
    "@radix-ui/react-portal": "^1.1.4",
+    "@radix-ui/react-select": "^2.1.6",
    "@radix-ui/react-separator": "^1.1.2",
    "@radix-ui/react-slot": "^1.1.2",
    "@radix-ui/react-tabs": "^1.1.3",
@ -34,6 +35,7 @@
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "date-fns": "^4.1.0",
+    "deepmerge": "^4.3.1",
    "dotenv": "^16.4.7",
    "drizzle-orm": "^0.39.3",
    "framer-motion": "^12.4.7",
@ -64,7 +66,8 @@
    "tailwindcss-animate": "^1.0.7",
    "unist-util-visit": "^5.0.0",
    "vaul": "^1.1.2",
-    "zod": "^3.24.2"
+    "zod": "^3.24.2",
+    "zustand": "^5.0.3"
  },
  "devDependencies": {
    "@biomejs/biome": "1.9.4",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -44,6 +44,9 @@ importers:
      '@radix-ui/react-portal':
        specifier: ^1.1.4
        version: 1.1.4(@types/react-dom@19.0.3(@types/react@19.0.9))(@types/react@19.0.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-select':
+        specifier: ^2.1.6
+        version: 2.1.6(@types/react-dom@19.0.3(@types/react@19.0.9))(@types/react@19.0.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
      '@radix-ui/react-separator':
        specifier: ^1.1.2
        version: 1.1.2(@types/react-dom@19.0.3(@types/react@19.0.9))(@types/react@19.0.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@ -83,6 +86,9 @@ importers:
      date-fns:
        specifier: ^4.1.0
        version: 4.1.0
+      deepmerge:
+        specifier: ^4.3.1
+        version: 4.3.1
      dotenv:
        specifier: ^16.4.7
        version: 16.4.7
@ -176,6 +182,9 @@ importers:
      zod:
        specifier: ^3.24.2
        version: 3.24.2
+      zustand:
+        specifier: ^5.0.3
+        version: 5.0.3(@types/react@19.0.9)(react@19.0.0)(use-sync-external-store@1.4.0(react@19.0.0))
    devDependencies:
      '@biomejs/biome':
        specifier: 1.9.4
@ -1324,6 +1333,9 @@ packages:
    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
    engines: {node: '>=14'}

+  '@radix-ui/number@1.1.0':
+    resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==}
+
  '@radix-ui/primitive@1.1.1':
    resolution: {integrity: sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==}

@ -1611,6 +1623,19 @@ packages:
      '@types/react-dom':
        optional: true

+  '@radix-ui/react-select@2.1.6':
+    resolution: {integrity: sha512-T6ajELxRvTuAMWH0YmRJ1qez+x4/7Nq7QIx7zJ0VK3qaEWdnWpNbEDnmWldG1zBDwqrLy5aLMUWcoGirVj5kMg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
  '@radix-ui/react-separator@1.1.2':
    resolution: {integrity: sha512-oZfHcaAp2Y6KFBX6I5P1u7CQoy4lheCGiYj+pGFrHy8E/VNRb5E39TkTr3JrV520csPBTZjkuKFdEsjS5EUNKQ==}
    peerDependencies:
@ -3733,6 +3758,24 @@ packages:
  zod@3.24.2:
    resolution: {integrity: sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==}

+  zustand@5.0.3:
+    resolution: {integrity: sha512-14fwWQtU3pH4dE0dOpdMiWjddcH+QzKIgk1cl8epwSE7yag43k/AD/m4L6+K7DytAOr9gGBe3/EXj9g7cdostg==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
  zwitch@2.0.4:
    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}

@ -4554,6 +4597,8 @@ snapshots:
  '@pkgjs/parseargs@0.11.0':
    optional: true

+  '@radix-ui/number@1.1.0': {}
+
  '@radix-ui/primitive@1.1.1': {}

  '@radix-ui/react-accordion@1.2.3(@types/react-dom@19.0.3(@types/react@19.0.9))(@types/react@19.0.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
@ -4855,6 +4900,35 @@ snapshots:
      '@types/react': 19.0.9
      '@types/react-dom': 19.0.3(@types/react@19.0.9)

+  '@radix-ui/react-select@2.1.6(@types/react-dom@19.0.3(@types/react@19.0.9))(@types/react@19.0.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.0
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.2(@types/react-dom@19.0.3(@types/react@19.0.9))(@types/react@19.0.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.0.9)(react@19.0.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.0.9)(react@19.0.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@19.0.9)(react@19.0.0)
+      '@radix-ui/react-dismissable-layer': 1.1.5(@types/react-dom@19.0.3(@types/react@19.0.9))(@types/react@19.0.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@19.0.9)(react@19.0.0)
+      '@radix-ui/react-focus-scope': 1.1.2(@types/react-dom@19.0.3(@types/react@19.0.9))(@types/react@19.0.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@19.0.9)(react@19.0.0)
+      '@radix-ui/react-popper': 1.2.2(@types/react-dom@19.0.3(@types/react@19.0.9))(@types/react@19.0.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-portal': 1.1.4(@types/react-dom@19.0.3(@types/react@19.0.9))(@types/react@19.0.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.0.3(@types/react@19.0.9))(@types/react@19.0.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-slot': 1.1.2(@types/react@19.0.9)(react@19.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.0.9)(react@19.0.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.0.9)(react@19.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.0.9)(react@19.0.0)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@19.0.9)(react@19.0.0)
+      '@radix-ui/react-visually-hidden': 1.1.2(@types/react-dom@19.0.3(@types/react@19.0.9))(@types/react@19.0.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      aria-hidden: 1.2.4
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      react-remove-scroll: 2.6.3(@types/react@19.0.9)(react@19.0.0)
+    optionalDependencies:
+      '@types/react': 19.0.9
+      '@types/react-dom': 19.0.3(@types/react@19.0.9)
+
  '@radix-ui/react-separator@1.1.2(@types/react-dom@19.0.3(@types/react@19.0.9))(@types/react@19.0.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
    dependencies:
      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.0.3(@types/react@19.0.9))(@types/react@19.0.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@ -7445,4 +7519,10 @@ snapshots:

  zod@3.24.2: {}

+  zustand@5.0.3(@types/react@19.0.9)(react@19.0.0)(use-sync-external-store@1.4.0(react@19.0.0)):
+    optionalDependencies:
+      '@types/react': 19.0.9
+      react: 19.0.0
+      use-sync-external-store: 1.4.0(react@19.0.0)
+
  zwitch@2.0.4: {}
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@ -59,6 +59,7 @@ export default async function LocaleLayout({ children, params }: LocaleLayoutPro
 				GeistSans.variable,
 				GeistMono.variable,
 			)}>
+				{/* https://next-intl.dev/docs/usage/configuration#nextintlclientprovider */}
 				<NextIntlClientProvider messages={messages}>
 					<Providers>
 						<div className="flex flex-col min-h-screen">
--- a/src/components/LocaleSwitcher.tsx
+++ b/src/components/LocaleSwitcher.tsx
@ -1,21 +0,0 @@
-import { useLocale, useTranslations } from "next-intl";
-import { routing } from "@/i18n/routing";
-import LocaleSwitcherSelect from "./LocaleSwitcherSelect";
-
-/**
- * This component is used to render a locale switcher.
- */
-export default function LocaleSwitcher() {
-  const t = useTranslations("LocaleSwitcher");
-  const locale = useLocale();
-
-  return (
-    <LocaleSwitcherSelect defaultValue={locale} label={t("label")}>
-      {routing.locales.map((item) => (
-        <option key={item} value={item}>
-          {t("locale", { locale: item })}
-        </option>
-      ))}
-    </LocaleSwitcherSelect>
-  );
-}
--- a/src/components/LocaleSwitcherSelect.tsx
+++ b/src/components/LocaleSwitcherSelect.tsx
@ -1,60 +0,0 @@
-"use client";
-
-import clsx from "clsx";
-import { useParams } from "next/navigation";
-import { ChangeEvent, ReactNode, useTransition } from "react";
-import { Locale } from "@/i18n/routing";
-import { usePathname, useRouter } from "@/i18n/navigation";
-
-interface LocaleSwitcherSelectProps {
-  children: ReactNode;
-  defaultValue: string;
-  label: string;
-};
-
-/**
- * This component is used to render a select element for the locale switcher.
- */
-export default function LocaleSwitcherSelect({
-  children,
-  defaultValue,
-  label
-}: LocaleSwitcherSelectProps) {
-  const router = useRouter();
-  const [isPending, startTransition] = useTransition();
-  const pathname = usePathname();
-  const params = useParams();
-
-  function onSelectChange(event: ChangeEvent<HTMLSelectElement>) {
-    const nextLocale = event.target.value as Locale;
-    startTransition(() => {
-      router.replace(
-        // @ts-expect-error -- TypeScript will validate that only known `params`
-        // are used in combination with a given `pathname`. Since the two will
-        // always match for the current route, we can skip runtime checks.
-        { pathname, params },
-        { locale: nextLocale }
-      );
-    });
-  }
-
-  return (
-    <label
-      className={clsx(
-        "relative text-gray-400",
-        isPending && "transition-opacity [&:disabled]:opacity-30"
-      )}
-    >
-      <p className="sr-only">{label}</p>
-      <select
-        className="inline-flex appearance-none bg-transparent py-3 pl-2 pr-6"
-        defaultValue={defaultValue}
-        disabled={isPending}
-        onChange={onSelectChange}
-      >
-        {children}
-      </select>
-      <span className="pointer-events-none absolute right-2 top-[8px]">⌄</span>
-    </label>
-  );
-}
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@ -1,18 +0,0 @@
-import {useTranslations} from 'next-intl';
-import LocaleSwitcher from './LocaleSwitcher';
-import NavigationLink from './NavigationLink';
-
-export default function Navigation() {
-  const t = useTranslations('Navigation');
-
-  return (
-    <div className="bg-slate-850">
-      <nav className="container flex justify-between p-2 text-white">
-        <div>
-          <NavigationLink href="/">{t('home')}</NavigationLink>
-        </div>
-        <LocaleSwitcher />
-      </nav>
-    </div>
-  );
-}
--- a/src/components/layout/lang-attribute-setter.tsx
+++ b/src/components/layout/lang-attribute-setter.tsx
@ -1,23 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-
-interface LangAttributeSetterProps {
-  locale: string;
-}
-
-/**
- * Client component that sets the lang attribute on the html element
- * This is necessary because we can't set the lang attribute directly in the [locale] layout
- * as it would create nested html tags, and we can't set the lang attribute in the root layout
- * as it can't get the locale there.
- */
-export function LangAttributeSetter({ locale }: LangAttributeSetterProps) {
-  useEffect(() => {
-    // Set the lang attribute on the html element
-    document.documentElement.lang = locale;
-  }, [locale]);
-
-  // This component doesn't render anything
-  return null;
-}
--- a/src/components/layout/locale-selector.tsx
+++ b/src/components/layout/locale-selector.tsx
@ -0,0 +1,64 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { usePathname, useRouter } from "@/i18n/navigation";
+import {
+  Locale,
+  LOCALE_LIST,
+  routing,
+} from "@/i18n/routing";
+import { useLocaleStore } from "@/stores/locale-store";
+import { Globe, GlobeIcon } from "lucide-react";
+import { useLocale } from "next-intl";
+import { useParams } from "next/navigation";
+import { useEffect, useTransition } from "react";
+
+export default function LocaleSelector() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const params = useParams();
+  const locale = useLocale();
+  const { currentLocale, setCurrentLocale } = useLocaleStore();
+  const [, startTransition] = useTransition();
+
+  useEffect(() => {
+    setCurrentLocale(locale);
+  }, [locale, setCurrentLocale]);
+
+  function onSelectChange(nextLocale: Locale) {
+    setCurrentLocale(nextLocale);
+
+    startTransition(() => {
+      router.replace(
+        { pathname }, // if your want to redirect to the current page
+        { locale: nextLocale }
+      );
+    });
+  }
+
+  return (
+    <Select
+      defaultValue={locale}
+      value={currentLocale}
+      onValueChange={onSelectChange}
+    >
+      <SelectTrigger className="w-fit">
+        <SelectValue placeholder="🌐" />
+      </SelectTrigger>
+      <SelectContent>
+        {routing.locales.map((cur) => (
+          <SelectItem key={cur} value={cur}
+            className="flex items-center">
+            {LOCALE_LIST[cur]}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
--- a/src/components/marketing/navbar-mobile.tsx
+++ b/src/components/marketing/navbar-mobile.tsx
@ -18,6 +18,7 @@ import { usePathname } from 'next/navigation';
 import * as React from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
 import { ThemeSwitcherHorizontal } from '@/components/layout/theme-switcher-horizontal';
+import LocaleSelector from '@/components/layout/locale-selector';

 export function NavbarMobile({
  className,
@ -100,9 +101,9 @@ export function NavbarMobile({
  );
 }

-type MainMobileMenuProps = {
+interface MainMobileMenuProps {
  onLinkClicked: () => void;
-};
+}

 function MainMobileMenu({ onLinkClicked }: MainMobileMenuProps) {
  const [expanded, setExpanded] = React.useState<Record<string, boolean>>({});
@ -228,8 +229,8 @@ function MainMobileMenu({ onLinkClicked }: MainMobileMenuProps) {
        </ul>

        {/* bottom buttons */}
-        <div className="flex w-full items-center justify-between gap-2 border-t border-border/40 p-4">
-          <div className="text-base font-medium"></div>
+        <div className="flex w-full items-center justify-between gap-4 border-t border-border/40 py-4">
+          <LocaleSelector />
          <ThemeSwitcherHorizontal />
        </div>
      </div>
@ -237,7 +238,7 @@ function MainMobileMenu({ onLinkClicked }: MainMobileMenuProps) {
  );
 }

-type DocsMobileMenuProps = {
+interface DocsMobileMenuProps {
  onLinkClicked: () => void;
 };

@ -302,8 +303,8 @@ function DocsMobileMenu({
            </li>
          ))}
        </ul>
-        <div className="flex w-full items-center justify-between gap-2 border-y border-border/40 p-4">
-          <div className="text-base font-medium"></div>
+        <div className="flex w-full items-center justify-between gap-2 border-y border-border/40 py-4">
+          <LocaleSelector />
          <ThemeSwitcherHorizontal />
        </div>
      </div>
--- a/src/components/marketing/navbar.tsx
+++ b/src/components/marketing/navbar.tsx
@ -26,7 +26,7 @@ import { MarketingConfig } from '@/types';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { ArrowUpRightIcon } from 'lucide-react';
-import LocaleSwitcher from '../LocaleSwitcher';
+import LocaleSelector from '@/components/layout/locale-selector';

 interface NavBarProps {
  scroll?: boolean;
@ -171,8 +171,8 @@ export function Navbar({ scroll, config }: NavBarProps) {
              </div>
            )}

-            <ThemeSwitcher />
-            <LocaleSwitcher />
+            {/* <ThemeSwitcher /> */}
+            <LocaleSelector />
          </div>
        </nav>

--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@ -0,0 +1,159 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50 ml-1" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
--- a/src/i18n/routing.ts
+++ b/src/i18n/routing.ts
@ -2,9 +2,9 @@ import { defineRouting } from "next-intl/routing";

 export const LOCALES = ["en", "zh"];
 export const DEFAULT_LOCALE = "en";
-export const LOCALE_NAMES: Record<string, string> = {
-  en: "English",
-  zh: "中文",
+export const LOCALE_LIST: Record<string, string> = {
+  en: "🇬🇧 English",
+  zh: "🇨🇳 中文",
 };

 /**
--- a/src/middleware.ts
+++ b/src/middleware.ts
@ -3,9 +3,16 @@ import { routing } from './i18n/routing';

 export default createMiddleware(routing);

+/**
+ * Next.js internationalized routing
+ * 
+ * https://next-intl.dev/docs/routing#base-path
+ */
 export const config = {
+  // The `matcher` is relative to the `basePath`
  matcher: [
-    // Enable a redirect to a matching locale at the root
+    // This entry handles the root of the base
+    // path and should always be included
    '/',

    // Set a cookie to remember the previous locale for
@ -13,7 +20,7 @@ export const config = {
    '/(zh|en)/:path*',

    // Enable redirects that add missing locales
-    // (e.g. `/pathnames` -> `/en/pathnames`)
+    // (e.g. `/pathnames` -> `/zh/pathnames`)
    '/((?!_next|_vercel|.*\\..*).*)'
  ]
 };
--- a/src/stores/locale-store.ts
+++ b/src/stores/locale-store.ts
@ -0,0 +1,21 @@
+import { Locale } from "@/i18n/routing";
+import { create } from "zustand";
+
+interface LocaleState {
+  currentLocale: Locale
+  setCurrentLocale: (locale: Locale) => void
+}
+
+/**
+ * Zustand create function
+ * create lets you create a React Hook with API utilities attached.
+ *
+ * https://zustand.docs.pmnd.rs/apis/create
+ */
+export const useLocaleStore = create<LocaleState>((set) => ({
+  currentLocale: "", // don't change, it will affect the language detection switch judgment
+  setCurrentLocale: (locale) =>
+    set((state) => ({
+      currentLocale: locale,
+    })),
+}));