refactor: Update Playground component with improved color selection f…

…unctionality and tooltips for switching color formats
HasanYahya101 · Jul 23, 2024 · 4858659 · 4858659
1 parent f78e38f
commit 4858659
Showing 1 changed file with 26 additions and 22 deletions.
diff --git a/src/components/component/playground.jsx b/src/components/component/playground.jsx
@@ -312,19 +312,7 @@ export function Playground() {
         setHexValue(hsltoHex(hsl.h, hsl.s, hsl.l));
     };
 
-    const switchMode = (value = 'null') => {
-        if (value !== 'null') {
-            setSliderMode(value);
-            toast.success(`Successfully Switched to ${value === "hsl" ? "HSL" : "RGB"} mode`,
-                {
-                    action: {
-                        label: "Close",
-                        onClick: () => toast.dismiss(),
-                    }
-                });
-            return;
-        }
-
+    const switchMode = () => {
         setSliderMode(sliderMode === "hsl" ? "rgb" : "hsl");
         toast.success(`Successfully Switched to ${sliderMode === "hsl" ? "RGB" : "HSL"} mode`,
             {
@@ -336,12 +324,33 @@ export function Playground() {
         return;
     };
 
-    const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+    const switchtoHSLMode = () => {
+        setSliderMode("hsl");
+        toast.success("Successfully Switched to HSL mode",
+            {
+                action: {
+                    label: "Close",
+                    onClick: () => toast.dismiss(),
+                }
+            });
+    };
+
+    const switchtoRGBMode = () => {
+        setSliderMode("rgb");
+        toast.success("Successfully Switched to RGB mode",
+            {
+                action: {
+                    label: "Close",
+                    onClick: () => toast.dismiss(),
+                }
+            });
+    };
+
+    const isMac = navigator.userAgent.includes('Macintosh') || navigator.userAgent.includes('MacIntel');
 
     const copyHEXShortcut = isMac ? "⌘Z" : "Ctrl+Z";
     const copyRGBShortcut = isMac ? "⌘X" : "Ctrl+X";
     const copyHSLShortcut = isMac ? "⌘C" : "Ctrl+C";
-    const switchShortcut = isMac ? "⌘V" : "Ctrl+V";
 
     const handleShortcuts = (e) => {
         const ctrlKey = e.metaKey || e.ctrlKey;
@@ -350,7 +359,6 @@ export function Playground() {
         const ZKey = e.key === "z" || e.key === "Z";
         const XKey = e.key === "x" || e.key === "X";
         const CKey = e.key === "c" || e.key === "C";
-        const VKey = e.key === "v" || e.key === "V";
         if (ctrlKey && ZKey && !shiftKey && !altKey) {
             e.preventDefault();
             CopyHEX();
@@ -360,9 +368,6 @@ export function Playground() {
         } else if (ctrlKey && CKey && !shiftKey && !altKey) {
             e.preventDefault();
             CopyHSL();
-        } else if (ctrlKey && VKey && !shiftKey && !altKey) {
-            e.preventDefault();
-            switchMode();
         }
     };
 
@@ -509,7 +514,7 @@ export function Playground() {
                                                 <Tooltip>
                                                     <TooltipTrigger>
                                                         <Button variant="outline" size="icon" className="h-8 w-8 text-right opacity-0 group-hover:opacity-100 group-hover:animate-fadeInLeft"
-                                                            onClick={switchMode('rgb')}
+                                                            onClick={switchtoRGBMode}
                                                         >
                                                             <ArrowRightLeft className="w-4 h-4" />
                                                         </Button>
@@ -537,7 +542,7 @@ export function Playground() {
                                                 <Tooltip>
                                                     <TooltipTrigger>
                                                         <Button variant="outline" size="icon" className="h-8 w-8 text-right opacity-0 group-hover:opacity-100 group-hover:animate-fadeInLeft"
-                                                            onClick={switchMode('hsl')}
+                                                            onClick={switchtoHSLMode}
                                                         >
                                                             <ArrowRightLeft className="w-4 h-4" />
                                                         </Button>
@@ -574,7 +579,6 @@ export function Playground() {
                     <ContextMenuItem inset onClick={() => switchMode()}
                     >
                         {sliderMode === "hsl" ? "Switch to RGB" : "Switch to HSL"}
-                        <ContextMenuShortcut>{switchShortcut}</ContextMenuShortcut>
                     </ContextMenuItem>
                 </ContextMenuContent>
             </ContextMenu>