国际化 (i18n)

SoloKit UI 内置了国际化支持，目前支持中文和英文两种语言。本文档将介绍如何配置和使用国际化功能。

支持的语言

SoloKit UI 目前支持以下语言:

• zh - 中文 (默认)
• en - 英文

基本设置

你可以在使用组件时直接设置语言:

import { Waitlist } from "@solokit/ui";

function MyPage() {
  return (
    <Waitlist
      title="Join our waitlist"
      description="We're launching soon. Sign up to be notified."
      language="en" // 使用英文
    />
  );
}

使用ThemeI18nProvider

为了在整个应用中统一管理语言设置，你可以使用ThemeI18nProvider:

import { ThemeI18nProvider } from "@solokit/ui";

export default function App({ Component, pageProps }) {
  return (
    <ThemeI18nProvider initialLanguage="zh" initialTheme="system">
      <Component {...pageProps} />
    </ThemeI18nProvider>
  );
}

ThemeI18nProvider同时管理主题和语言设置，是ThemeProvider和国际化功能的便捷组合。

在组件中使用翻译

如果你需要在自己的组件中使用SoloKit的翻译系统，可以使用useTranslation钩子:

import { useTranslation } from "react-i18next";
import "../i18n"; // 引入SoloKit的i18n配置

function MyCustomComponent() {
  const { t, i18n } = useTranslation();

  return (
    <div>
      <h1>{t("waitlist.defaultTitle")}</h1>
      <p>{t("waitlist.defaultDescription")}</p>
      <button
        onClick={() =>
          i18n.changeLanguage(i18n.language === "zh" ? "en" : "zh")
        }
      >
        {i18n.language === "zh" ? "Switch to English" : "切换到中文"}
      </button>
    </div>
  );
}