feat(ui): add label prop to toggle component (#215)

padok-team · Jan 10, 2024 · 9de0011 · 9de0011
1 parent df370ad
commit 9de0011
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 72 deletions.
diff --git a/ui/src/components/buttons/Toggle.tsx b/ui/src/components/buttons/Toggle.tsx
@@ -9,13 +9,17 @@ export interface ToggleProps {
   className?: string;
   checked?: boolean;
   defaultChecked?: boolean;
+  label?: string;
+  labelPlacement?: "left" | "right";
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 const Toggle: React.FC<ToggleProps> = ({
   className,
   checked,
   defaultChecked,
+  label,
+  labelPlacement = "left",
   onChange,
 }) => {
   const [internalChecked, setInternalChecked] = useState(
@@ -27,51 +31,63 @@ const Toggle: React.FC<ToggleProps> = ({
   };
 
   return (
-    <label className={twMerge(`relative rotate-180 cursor-pointer`, className)}>
-      <AvocadoOn
-        className={`
-          relative
-          top-0
-          left-0
-          transition-all
-          ease-in-out
-          duration-500
-          ${checked ?? internalChecked ? "opacity-100" : "opacity-0 delay-150"}
-        `}
-        height={32}
-        width={48}
-      />
-      <AvocadoOff
-        className={`
-          absolute
-          top-0
-          left-0
-          transition-all
-          ease-in-out
-          duration-500
-          ${checked ?? internalChecked ? "opacity-0 delay-150" : "opacity-100"}
-        `}
-        height={32}
-        width={48}
-      />
-      <AvocadoSeed
-        className={`
-          absolute
-          top-0
-          left-0
-          transition-all
-          duration-500
-          ${checked ?? internalChecked ? "rotate-90" : "translate-x-[22px] "}
-        `}
-        height={32}
-        width={32}
-      />
-      <input
-        type="checkbox"
-        className="hidden"
-        checked={checked ?? internalChecked}
-        onChange={onChange ?? handleChange}
-      />
+    <label className={twMerge(`flex items-center cursor-pointer`, className)}>
+      {labelPlacement === "left" && label && (
+        <span className="mr-2">{label}</span>
+      )}
+      <div className="relative rotate-180 ">
+        <AvocadoOn
+          className={`
+            relative
+            top-0
+            left-0
+            transition-all
+            ease-in-out
+            duration-500
+            ${
+              checked ?? internalChecked ? "opacity-100" : "opacity-0 delay-150"
+            }
+          `}
+          height={32}
+          width={48}
+        />
+        <AvocadoOff
+          className={`
+            absolute
+            top-0
+            left-0
+            transition-all
+            ease-in-out
+            duration-500
+            ${
+              checked ?? internalChecked ? "opacity-0 delay-150" : "opacity-100"
+            }
+          `}
+          height={32}
+          width={48}
+        />
+        <AvocadoSeed
+          className={`
+            absolute
+            top-0
+            left-0
+            transition-all
+            duration-500
+            ${checked ?? internalChecked ? "rotate-90" : "translate-x-[22px] "}
+          `}
+          height={32}
+          width={32}
+        />
+        <input
+          type="checkbox"
+          className="hidden"
+          checked={checked ?? internalChecked}
+          onChange={onChange ?? handleChange}
+        />
+      </div>
+      {labelPlacement === "right" && label && (
+        <span className="ml-2">{label}</span>
+      )}
     </label>
   );
 };

diff --git a/ui/src/components/misc/ThemeToggle.tsx b/ui/src/components/misc/ThemeToggle.tsx
@@ -21,18 +21,15 @@ const ThemeToggle: React.FC<ThemeToggleProps> = ({
       variant={variant}
       className={twMerge("items-center justify-center p-4 gap-4", className)}
     >
-      <span
+      <Toggle
         className={`
           text-base
           font-normal
           ${variant === "light" ? "text-nuances-black" : "text-nuances-50"}
         `}
-      >
-        {variant === "dark" ? "Disable" : "Enable"} Dark Mode
-      </span>
-      <Toggle
         checked={theme === "dark"}
         onChange={() => setTheme(theme === "dark" ? "light" : "dark")}
+        label={`${variant === "dark" ? "Disable" : "Enable"} Dark Mode`}
       />
     </Box>
   );

diff --git a/ui/src/pages/layers/Layers.tsx b/ui/src/pages/layers/Layers.tsx
@@ -102,11 +102,13 @@ const Layers: React.FC = () => {
                 text-base
                 font-semibold
                 ${theme === "light" ? "text-nuances-black" : "text-nuances-50"}
-            `}
+              `}
             >
-              {`${
-                layersQuery.isSuccess ? layersQuery.data.results.length : 0
-              } layers`}
+              {`
+                ${
+                  layersQuery.isSuccess ? layersQuery.data.results.length : 0
+                } layers
+              `}
             </span>
             <span
               className={`
@@ -124,7 +126,7 @@ const Layers: React.FC = () => {
                 text-base
                 font-medium
                 ${theme === "light" ? "text-primary-600" : "text-nuances-200"}
-            `}
+              `}
             >
               Filter by
             </span>
@@ -152,23 +154,16 @@ const Layers: React.FC = () => {
                 />
               </Dropdown>
             </div>
-            <div className="flex flex-row items-center gap-[7px]">
-              <span
-                className={`
-                  text-sm
-                  font-medium
-                  ${
-                    theme === "light" ? "text-nuances-black" : "text-nuances-50"
-                  }
-                `}
-              >
-                Hide Pull Requests
-              </span>
-              <Toggle
-                checked={hidePRFilter}
-                onChange={() => setHidePRFilter(!hidePRFilter)}
-              />
-            </div>
+            <Toggle
+              className={`
+                text-sm
+                font-medium
+                ${theme === "light" ? "text-nuances-black" : "text-nuances-50"}
+              `}
+              checked={hidePRFilter}
+              onChange={() => setHidePRFilter(!hidePRFilter)}
+              label="Hide Pull Requests"
+            />
           </div>
           <div className="flex flex-row items-center gap-2">
             <NavigationButton