fix: label/switch/radio cursor pointer

stanley2058 · Feb 25, 2025 · e8a9219 · e8a9219
1 parent d243aec
commit e8a9219
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 33 deletions.
diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
@@ -31,13 +31,23 @@ function YDocOptions() {
             })
           }
         >
-          <div className="flex items-center space-x-2">
-            <RadioGroupItem value="option-v1" id="option-v1" />
-            <Label htmlFor="option-v1">V1</Label>
+          <div className="flex items-center">
+            <Label
+              htmlFor="option-v1"
+              className="cursor-pointer flex gap-2 justify-center items-center"
+            >
+              <RadioGroupItem value="option-v1" id="option-v1" />
+              <span>V1</span>
+            </Label>
           </div>
-          <div className="flex items-center space-x-2">
-            <RadioGroupItem value="option-v2" id="option-v2" />
-            <Label htmlFor="option-v2">V2</Label>
+          <div className="flex items-center">
+            <Label
+              htmlFor="option-v2"
+              className="cursor-pointer flex gap-2 justify-center items-center"
+            >
+              <RadioGroupItem value="option-v2" id="option-v2" />
+              <span>V2</span>
+            </Label>
           </div>
         </RadioGroup>
       </div>
@@ -67,37 +77,52 @@ function DisplayOptions() {
         />
       </div>
 
-      <div className="flex items-center space-x-2">
-        <Switch
-          id="clipboard"
-          checked={enableClipboard}
-          onCheckedChange={(e) =>
-            displayOptionStore.setState({ enableClipboard: e })
-          }
-        />
-        <Label htmlFor="clipboard">Enable Clipboard</Label>
+      <div className="flex items-center">
+        <Label
+          htmlFor="clipboard"
+          className="cursor-pointer flex gap-2 justify-center items-center"
+        >
+          <Switch
+            id="clipboard"
+            checked={enableClipboard}
+            onCheckedChange={(e) =>
+              displayOptionStore.setState({ enableClipboard: e })
+            }
+          />
+          <span>Enable Clipboard</span>
+        </Label>
       </div>
 
-      <div className="flex items-center space-x-2">
-        <Switch
-          id="data-types"
-          checked={displayDataTypes}
-          onCheckedChange={(e) =>
-            displayOptionStore.setState({ displayDataTypes: e })
-          }
-        />
-        <Label htmlFor="data-types">Display Data Types</Label>
+      <div className="flex items-center">
+        <Label
+          htmlFor="data-types"
+          className="cursor-pointer flex gap-2 justify-center items-center"
+        >
+          <Switch
+            id="data-types"
+            checked={displayDataTypes}
+            onCheckedChange={(e) =>
+              displayOptionStore.setState({ displayDataTypes: e })
+            }
+          />
+          <span>Display Data Types</span>
+        </Label>
       </div>
 
-      <div className="flex items-center space-x-2">
-        <Switch
-          id="size"
-          checked={displaySize}
-          onCheckedChange={(e) =>
-            displayOptionStore.setState({ displaySize: e })
-          }
-        />
-        <Label htmlFor="size">Display Size</Label>
+      <div className="flex items-center">
+        <Label
+          htmlFor="size"
+          className="cursor-pointer flex gap-2 justify-center items-center"
+        >
+          <Switch
+            id="size"
+            checked={displaySize}
+            onCheckedChange={(e) =>
+              displayOptionStore.setState({ displaySize: e })
+            }
+          />
+          <span>Display Size</span>
+        </Label>
       </div>
     </>
   );

diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
@@ -28,6 +28,7 @@ function RadioGroupItem({
       data-slot="radio-group-item"
       className={cn(
         "border-primary text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "cursor-pointer",
         className,
       )}
       {...props}

diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
@@ -14,6 +14,7 @@ function Switch({
       data-slot="switch"
       className={cn(
         "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "cursor-pointer",
         className,
       )}
       {...props}