Maofeng
62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { LocalizedText } from "@workspace/i18n"
|
|
import { MoonIcon, SunIcon } from "@workspace/ui/components/icon"
|
|
import { cn } from "@workspace/ui/lib/utils"
|
|
|
|
import { appearanceMessages } from "../messages"
|
|
import type { ThemeColorConfig, ThemeScheme } from "../theme"
|
|
import {
|
|
accentColorSwatches,
|
|
baseColorSwatches,
|
|
ThemeColorPicker,
|
|
} from "./theme-color-picker"
|
|
|
|
export interface ThemeConfigCardProps {
|
|
className?: string
|
|
config: ThemeColorConfig
|
|
onConfigChange: (config: ThemeColorConfig) => void
|
|
scheme: ThemeScheme
|
|
}
|
|
|
|
export function ThemeConfigCard({
|
|
className,
|
|
config,
|
|
onConfigChange,
|
|
scheme,
|
|
}: ThemeConfigCardProps) {
|
|
return (
|
|
<section className={cn("w-full max-w-md rounded-xl border", className)}>
|
|
<header className="flex gap-4 border-b p-3">
|
|
{scheme === "light" ? (
|
|
<SunIcon className="size-5" />
|
|
) : (
|
|
<MoonIcon className="size-5" />
|
|
)}
|
|
<h2>
|
|
<LocalizedText message={appearanceMessages.themeColors} />
|
|
</h2>
|
|
</header>
|
|
<div className="space-y-4 p-4">
|
|
<p>
|
|
<LocalizedText message={appearanceMessages.themeColorsDescription} />
|
|
</p>
|
|
<ThemeColorPicker
|
|
swatches={baseColorSwatches}
|
|
title={<LocalizedText message={appearanceMessages.baseColor} />}
|
|
value={config.baseColor}
|
|
onValueChange={(baseColor) =>
|
|
onConfigChange({ ...config, baseColor })
|
|
}
|
|
/>
|
|
<ThemeColorPicker
|
|
swatches={accentColorSwatches}
|
|
title={<LocalizedText message={appearanceMessages.accentColor} />}
|
|
value={config.accentColor}
|
|
onValueChange={(accentColor) =>
|
|
onConfigChange({ ...config, accentColor })
|
|
}
|
|
/>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|