59 lines
1.3 KiB
TypeScript
59 lines
1.3 KiB
TypeScript
|
import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react"
|
||
|
|
|
||
|
|
import type { I18nDevtoolTheme } from "./devtool-preferences"
|
||
|
|
import { useDevtoolLocalization } from "./devtool-localization"
|
||
|
|
|
||
|
|
export interface DevtoolThemeSwitcherProps {
|
||
|
|
onThemeChange: (theme: I18nDevtoolTheme) => void
|
||
|
|
theme: I18nDevtoolTheme
|
||
|
|
}
|
||
|
|
|
||
|
|
const themes = [
|
||
|
|
{
|
||
|
|
accessibleLabel: "autoTheme",
|
||
|
|
icon: MonitorIcon,
|
||
|
|
label: "auto",
|
||
|
|
value: "auto",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
accessibleLabel: "lightTheme",
|
||
|
|
icon: SunIcon,
|
||
|
|
label: "light",
|
||
|
|
value: "light",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
accessibleLabel: "darkTheme",
|
||
|
|
icon: MoonIcon,
|
||
|
|
label: "dark",
|
||
|
|
value: "dark",
|
||
|
|
},
|
||
|
|
] as const
|
||
|
|
|
||
|
|
export function DevtoolThemeSwitcher({
|
||
|
|
onThemeChange,
|
||
|
|
theme,
|
||
|
|
}: DevtoolThemeSwitcherProps) {
|
||
|
|
const { messages } = useDevtoolLocalization()
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
aria-label={messages.settings.themeControl}
|
||
|
|
className="i18n-devtool__theme-switcher"
|
||
|
|
role="group"
|
||
|
|
>
|
||
|
|
{themes.map(({ accessibleLabel, icon: ThemeIcon, label, value }) => (
|
||
|
|
<button
|
||
|
|
key={value}
|
||
|
|
type="button"
|
||
|
|
aria-label={messages.settings[accessibleLabel]}
|
||
|
|
aria-pressed={theme === value}
|
||
|
|
onClick={() => onThemeChange(value)}
|
||
|
|
>
|
||
|
|
<ThemeIcon aria-hidden="true" />
|
||
|
|
<span>{messages.settings[label]}</span>
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|