Maofeng
44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import React from "react"
|
|
import { I18nProvider } from "@workspace/i18n"
|
|
import { messages as englishMessages } from "@workspace/appearance/locales/en-US"
|
|
import { messages as chineseMessages } from "@workspace/appearance/locales/zh-Hans"
|
|
import type { ThemeColorConfig } from "@workspace/appearance/theme"
|
|
|
|
import { AccentPicker } from "./AccentPicker"
|
|
|
|
const catalogs = {
|
|
"en-US": englishMessages,
|
|
"zh-Hans": chineseMessages,
|
|
} as const
|
|
|
|
export default function ThemeColorsExample({
|
|
locale,
|
|
}: {
|
|
locale: "en-US" | "zh-Hans"
|
|
}) {
|
|
const [config, setConfig] = React.useState<ThemeColorConfig>({
|
|
accentColor: "indigo",
|
|
baseColor: "neutral",
|
|
})
|
|
|
|
const title = locale === "zh-Hans" ? "强调色" : "Accent color"
|
|
|
|
return (
|
|
<I18nProvider catalogs={catalogs} locale={locale}>
|
|
<div className="mx-auto flex max-w-xl flex-col gap-6">
|
|
<AccentPicker
|
|
config={config}
|
|
title={title}
|
|
onConfigChange={setConfig}
|
|
/>
|
|
<AccentPicker
|
|
config={config}
|
|
title={title}
|
|
variant="swatch"
|
|
onConfigChange={setConfig}
|
|
/>
|
|
</div>
|
|
</I18nProvider>
|
|
)
|
|
}
|