Maofeng
54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { useMessage } from "@workspace/i18n"
|
|
import { MonitorIcon, MoonIcon, SunIcon } from "@workspace/ui/components/icon"
|
|
import { cn } from "@workspace/ui/lib/utils"
|
|
|
|
import { appearanceMessages } from "../messages"
|
|
import type { ThemeMode } from "../preferences"
|
|
import {
|
|
AppearanceOptionList,
|
|
type AppearanceOption,
|
|
} from "./appearance-option-list"
|
|
|
|
export interface ThemeModeOptionListProps {
|
|
className?: string
|
|
onValueChange: (value: ThemeMode) => void
|
|
value: ThemeMode
|
|
}
|
|
|
|
export function ThemeModeOptionList({
|
|
className,
|
|
onValueChange,
|
|
value,
|
|
}: ThemeModeOptionListProps) {
|
|
const title = useMessage(appearanceMessages.themeMode)
|
|
const lightLabel = useMessage(appearanceMessages.lightMode)
|
|
const darkLabel = useMessage(appearanceMessages.darkMode)
|
|
const systemLabel = useMessage(appearanceMessages.followSystem)
|
|
const descriptions: Record<ThemeMode, string> = {
|
|
light: useMessage(appearanceMessages.lightModeDescription),
|
|
dark: useMessage(appearanceMessages.darkModeDescription),
|
|
system: useMessage(appearanceMessages.followSystemDescription),
|
|
}
|
|
const items: readonly AppearanceOption<ThemeMode>[] = [
|
|
{ icon: <SunIcon />, label: lightLabel, value: "light" },
|
|
{ icon: <MoonIcon />, label: darkLabel, value: "dark" },
|
|
{ icon: <MonitorIcon />, label: systemLabel, value: "system" },
|
|
]
|
|
|
|
return (
|
|
<div className={cn("min-w-0 lg:flex-1", className)}>
|
|
<h2 className="font-semibold">{title}</h2>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{descriptions[value]}
|
|
</p>
|
|
<AppearanceOptionList
|
|
className="mt-2 w-full max-w-64"
|
|
items={items}
|
|
label={title}
|
|
value={value}
|
|
onValueChange={onValueChange}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|