42 lines
980 B
TypeScript
42 lines
980 B
TypeScript
import React from "react";
|
|
import { PickerModal, SelectOption } from "@/components/PickerModal";
|
|
|
|
type AppTheme = (typeof THEME_OPTIONS)[number]["value"];
|
|
|
|
interface ThemeModalProps {
|
|
visible: boolean;
|
|
current: AppTheme;
|
|
onSelect: (theme: AppTheme) => void;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const THEME_OPTIONS = [
|
|
{ value: "light", label: "Light" },
|
|
{ value: "dark", label: "Dark" },
|
|
{ value: "system", label: "System Default" },
|
|
] as const;
|
|
|
|
export function ThemeModal({
|
|
visible,
|
|
current,
|
|
onSelect,
|
|
onClose,
|
|
}: ThemeModalProps) {
|
|
return (
|
|
<PickerModal visible={visible} onClose={onClose} title="Appearance">
|
|
{THEME_OPTIONS.map((opt) => (
|
|
<SelectOption
|
|
key={opt.value}
|
|
label={opt.label}
|
|
value={opt.value}
|
|
selected={current === opt.value}
|
|
onSelect={(v) => {
|
|
onSelect(v as "light" | "dark" | "system");
|
|
onClose();
|
|
}}
|
|
/>
|
|
))}
|
|
</PickerModal>
|
|
);
|
|
}
|