From a432f9ba68a5cf372e9f7bf08f03e7f7e5e2dc9d Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 14 May 2024 07:08:19 -0600
Subject: [PATCH] Use select component

---
 web/src/components/settings/General.tsx | 41 +++++++++++++------------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/web/src/components/settings/General.tsx b/web/src/components/settings/General.tsx
index cd9e8528a..9af7c17df 100644
--- a/web/src/components/settings/General.tsx
+++ b/web/src/components/settings/General.tsx
@@ -10,14 +10,14 @@ import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { del as delData } from "idb-keyval";
 import { usePersistence } from "@/hooks/use-persistence";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-} from "../ui/dropdown-menu";
 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];
 
@@ -85,26 +85,27 @@ export default function General() {
                 </div>
               </div>
             </div>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button className="w-20">{`${playbackRate}x`}</Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                <DropdownMenuRadioGroup
-                  onValueChange={(rate) => setPlaybackRate(parseFloat(rate))}
-                >
+            <Select
+              value={playbackRate?.toString()}
+              onValueChange={(value) => setPlaybackRate(parseFloat(value))}
+            >
+              <SelectTrigger className="w-20">
+                {`${playbackRate}x`}
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
                   {PLAYBACK_RATE_DEFAULT.map((rate) => (
-                    <DropdownMenuRadioItem
+                    <SelectItem
                       key={rate}
                       className="cursor-pointer"
                       value={rate.toString()}
                     >
                       {rate}x
-                    </DropdownMenuRadioItem>
+                    </SelectItem>
                   ))}
-                </DropdownMenuRadioGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
             <Separator className="flex my-2 bg-secondary" />
             <div className="mt-2 space-y-6">
               <div className="space-y-0.5">