42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { useId } from "react";
|
|
|
|
import { Label } from "../../cmp/label";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "../../cmp/select";
|
|
import type { ThemePolarity } from "../types";
|
|
import { useTheme } from "../Provider";
|
|
|
|
export function PolarityPicker() {
|
|
const id = useId();
|
|
const { themePolarity, setThemePolarity } = useTheme();
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<Label htmlFor={id}>Polarity</Label>
|
|
<Select
|
|
value={themePolarity}
|
|
onValueChange={(value) => setThemePolarity(value as ThemePolarity)}
|
|
>
|
|
<SelectTrigger id={id} className="w-65">
|
|
<SelectValue>
|
|
{themePolarity === "system"
|
|
? "System"
|
|
: themePolarity === "dark"
|
|
? "Dark"
|
|
: "Light"}
|
|
</SelectValue>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="system">System</SelectItem>
|
|
<SelectItem value="dark">Dark</SelectItem>
|
|
<SelectItem value="light">Light</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
);
|
|
}
|