nezha-dash-v1/src/components/LanguageSwitcher.tsx

"use client"

import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { cn } from "@/lib/utils"
import { CheckCircleIcon, LanguageIcon } from "@heroicons/react/20/solid"
import { useTranslation } from "react-i18next"

export function LanguageSwitcher() {
  const { t, i18n } = useTranslation()

  const customBackgroundImage = (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined

  const locale = i18n.languages[0]

  const handleSelect = (e: Event, newLocale: string) => {
    e.preventDefault() // 阻止默认的关闭行为
    i18n.changeLanguage(newLocale)
  }

  const localeItems = [
    { name: t("language.zh-CN"), code: "zh-CN" },
    { name: t("language.zh-TW"), code: "zh-TW" },
    { name: t("language.en-US"), code: "en-US" },
    { name: t("language.ru-RU"), code: "ru-RU" },
    { name: t("language.es-ES"), code: "es-ES" },
    { name: t("language.de-DE"), code: "de-DE" },
    { name: t("language.ta-IN"), code: "ta-IN" },
  ]

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="outline"
          size="sm"
          className={cn("rounded-full px-[9px] bg-white dark:bg-black", {
            "bg-white/70 dark:bg-black/70": customBackgroundImage,
          })}
        >
          <LanguageIcon className="size-4" />
          <span className="sr-only">Change language</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="flex flex-col gap-0.5" align="end">
        {localeItems.map((item, index) => (
          <DropdownMenuItem
            key={item.code}
            onSelect={(e) => handleSelect(e, item.code)}
            className={cn(
              {
                "gap-3 bg-muted font-semibold": locale === item.code,
              },
              {
                "rounded-t-[5px]": index === localeItems.length - 1,
                "rounded-[5px]": index !== 0 && index !== localeItems.length - 1,
                "rounded-b-[5px]": index === 0,
              },
            )}
          >
            {item.name} {locale === item.code && <CheckCircleIcon className="size-4" />}
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}