style: replaced select for dropdown

bryanlundberg · Nov 4, 2024 · 2439cd7 · 2439cd7
1 parent cea517e
commit 2439cd7
Showing 1 changed file with 35 additions and 17 deletions.
diff --git a/src/components/navigation/buttons/button-select-mode.tsx b/src/components/navigation/buttons/button-select-mode.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { Button } from "@/components/ui/button";
 import {
   Select,
   SelectContent,
@@ -7,31 +8,48 @@ import {
   SelectLabel,
   SelectTrigger,
 } from "@/components/ui/select";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { useTimerStore } from "@/store/timerStore";
+import { MixIcon } from "@radix-ui/react-icons";
 
 export default function ButtonSelectMode() {
   const { timerMode, setTimerMode } = useTimerStore();
   return (
     <>
-      <Select
-        defaultValue={timerMode}
-        onValueChange={(e: any) => setTimerMode(e)}
-      >
-        <SelectTrigger className="w-fit"></SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Mode</SelectLabel>
-            <SelectItem value="normal">Normal</SelectItem>
-            <SelectItem value="stackmat">Stackmat</SelectItem>
-            <SelectItem value="virtual" disabled>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="py-0 px-3">
+            <MixIcon />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-fit">
+          <DropdownMenuLabel>Mode</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuRadioGroup
+            value={timerMode}
+            onValueChange={(e: any) => setTimerMode(e)}
+          >
+            <DropdownMenuRadioItem value="normal">Normal</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="stackmat">
+              Stackmat
+            </DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="virtual" disabled>
               Virtual
-            </SelectItem>
-            <SelectItem value="smart-cube" disabled>
+            </DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="smart-cube" disabled>
               Smart cube
-            </SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
+            </DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </>
   );
 }