Use select component

This commit is contained in:
Nicolas Mowen 2024-05-14 07:08:19 -06:00
parent 6456b2bcaf
commit a432f9ba68

View File

@ -10,14 +10,14 @@ import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import { del as delData } from "idb-keyval"; import { del as delData } from "idb-keyval";
import { usePersistence } from "@/hooks/use-persistence"; import { usePersistence } from "@/hooks/use-persistence";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuTrigger,
} from "../ui/dropdown-menu";
import { isSafari } from "react-device-detect"; import { isSafari } from "react-device-detect";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
} from "../ui/select";
const PLAYBACK_RATE_DEFAULT = isSafari ? [0.5, 1, 2] : [0.5, 1, 2, 4, 8, 16]; const PLAYBACK_RATE_DEFAULT = isSafari ? [0.5, 1, 2] : [0.5, 1, 2, 4, 8, 16];
@ -85,26 +85,27 @@ export default function General() {
</div> </div>
</div> </div>
</div> </div>
<DropdownMenu> <Select
<DropdownMenuTrigger asChild> value={playbackRate?.toString()}
<Button className="w-20">{`${playbackRate}x`}</Button> onValueChange={(value) => setPlaybackRate(parseFloat(value))}
</DropdownMenuTrigger> >
<DropdownMenuContent> <SelectTrigger className="w-20">
<DropdownMenuRadioGroup {`${playbackRate}x`}
onValueChange={(rate) => setPlaybackRate(parseFloat(rate))} </SelectTrigger>
> <SelectContent>
<SelectGroup>
{PLAYBACK_RATE_DEFAULT.map((rate) => ( {PLAYBACK_RATE_DEFAULT.map((rate) => (
<DropdownMenuRadioItem <SelectItem
key={rate} key={rate}
className="cursor-pointer" className="cursor-pointer"
value={rate.toString()} value={rate.toString()}
> >
{rate}x {rate}x
</DropdownMenuRadioItem> </SelectItem>
))} ))}
</DropdownMenuRadioGroup> </SelectGroup>
</DropdownMenuContent> </SelectContent>
</DropdownMenu> </Select>
<Separator className="flex my-2 bg-secondary" /> <Separator className="flex my-2 bg-secondary" />
<div className="mt-2 space-y-6"> <div className="mt-2 space-y-6">
<div className="space-y-0.5"> <div className="space-y-0.5">