Maofeng
67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
import { useMessage } from "@workspace/i18n"
|
|
import { SunIcon } from "@workspace/ui/components/icon"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@workspace/ui/components/select"
|
|
import { cn } from "@workspace/ui/lib/utils"
|
|
|
|
import type { Brightness } from "../../display"
|
|
import { appearanceMessages } from "../../messages"
|
|
|
|
export interface BrightnessFieldProps {
|
|
className?: string
|
|
onValueChange: (value: Brightness) => void
|
|
value: Brightness
|
|
}
|
|
|
|
export function BrightnessField({
|
|
className,
|
|
onValueChange,
|
|
value,
|
|
}: BrightnessFieldProps) {
|
|
const title = useMessage(appearanceMessages.brightness)
|
|
const dim = useMessage(appearanceMessages.brightnessDim)
|
|
const normal = useMessage(appearanceMessages.brightnessNormal)
|
|
const bright = useMessage(appearanceMessages.brightnessBright)
|
|
const description = useMessage(appearanceMessages.brightnessDescription)
|
|
const items: ReadonlyArray<{ label: string; value: Brightness }> = [
|
|
{ label: dim, value: "dim" },
|
|
{ label: normal, value: "normal" },
|
|
{ label: bright, value: "bright" },
|
|
]
|
|
|
|
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">{description}</p>
|
|
<Select
|
|
items={items}
|
|
value={value}
|
|
onValueChange={(brightness) => {
|
|
if (brightness) onValueChange(brightness)
|
|
}}
|
|
>
|
|
<SelectTrigger aria-label={title} className="mt-2 w-full max-w-40">
|
|
<SunIcon />
|
|
<SelectValue>
|
|
{(selectedValue: Brightness | null) =>
|
|
items.find((item) => item.value === selectedValue)?.label
|
|
}
|
|
</SelectValue>
|
|
</SelectTrigger>
|
|
<SelectContent alignItemWithTrigger={false}>
|
|
{items.map((item) => (
|
|
<SelectItem key={item.value} value={item.value}>
|
|
{item.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
)
|
|
}
|