fix: support passing child elements in switch component

Author: mayank1513

lib/src/client/switch/switch.module.scss

@@ -1,6 +1,7 @@
 .switch {
   all: unset;
   position: relative;
+  display: inline-block;
   color: currentColor;
   border-radius: 50%;
   border: 1px dashed currentColor;

lib/src/client/switch/switch.tsx

@@ -3,7 +3,7 @@ import styles from "./switch.module.scss";
 import { useStore } from "../../utils";
 import { modes } from "../../constants";
 
-export interface SwitchProps extends HTMLProps<HTMLElement> {
+export interface SwitchProps extends HTMLProps<HTMLButtonElement> {
   /** html tag @defaultValue 'button' */
   tag?: "button" | "div";
   /** Diameter of the color switch */
@@ -22,7 +22,13 @@ export interface SwitchProps extends HTMLProps<HTMLElement> {
  *
  * @source - Source code
  */
-export const Switch = ({ tag: Tag = "button", size = 24, skipSystem, ...props }: SwitchProps) => {
+export const Switch = ({
+  tag: Tag = "button",
+  size = 24,
+  skipSystem,
+  children,
+  ...props
+}: SwitchProps) => {
   const [state, setState] = useStore();
   /** toggle mode */
   const handleModeSwitch = () => {
@@ -34,11 +40,27 @@ export const Switch = ({ tag: Tag = "button", size = 24, skipSystem, ...props }:
       m: modes[(index + 1) % n],
     });
   };
-  const className = [props.className, styles["switch"]].filter(Boolean).join(" ");
+  if (children) {
+    return (
+      // @ts-expect-error -- too complex types
+      <Tag
+        suppressHydrationWarning
+        {...props}
+        data-testid="switch"
+        // skipcq: JS-0417
+        onClick={handleModeSwitch}>
+        {/* @ts-expect-error -> we are setting the CSS variable */}
+        <div className={styles.switch} style={{ "--size": `${size}px` }} />
+        {children}
+      </Tag>
+    );
+  }
   return (
     <Tag
+      // Hydration warning is caused when the data from localStorage differs from the default data provided while rendering on server
+      suppressHydrationWarning
       {...props}
-      className={className}
+      className={[props.className, styles.switch].join(" ")}
       // @ts-expect-error -> we are setting the CSS variable
       style={{ "--size": `${size}px` }}
       data-testid="switch"

packages/shared/src/client/header/header.module.scss

@@ -44,6 +44,7 @@
   padding: 15px 20px;
   gap: 20px;
   display: flex;
+  place-items: center;
   text-transform: capitalize;
   cursor: pointer;
   margin: 0;

packages/shared/src/client/header/theme-switch.tsx

@@ -2,26 +2,18 @@
 
 import { useMode } from "nextjs-darkmode/hooks";
 import styles from "./header.module.scss";
-import { useCallback } from "react";
-import { ColorSchemePreference } from "nextjs-darkmode";
-import { Switch } from "nextjs-darkmode/switch";
 
-const modes: ColorSchemePreference[] = ["dark", "light", "system"];
+import { Switch } from "nextjs-darkmode/switch";
 
 /** This is a wrapper around `nextjs-darkmode's ColorSwitch component to improve mobile view. */
 export default function ThemeSwitch() {
-  const { mode, setMode } = useMode();
-  const toggle = useCallback(() => {
-    const index = modes.indexOf(mode);
-    setMode(modes[(index + 1) % modes.length]);
-  }, [mode]);
+  const { mode } = useMode();
 
   return (
-    <button className={styles.themeswitch} onClick={toggle}>
-      <Switch tag="div" />
+    <Switch className={styles.themeswitch}>
       <span className="mb" suppressHydrationWarning>
         {mode}
       </span>
-    </button>
+    </Switch>
   );
 }