From 88c9eaf39088101ae8dfd4b16ab0ce0d5b938298 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sat, 9 Sep 2023 16:58:09 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Refactor=20SwitchDarkMode2=20com?=
 =?UTF-8?q?ponent=20=F0=9F=8C=9F=20Improved=20code=20structure=20and=20rea?=
 =?UTF-8?q?dability=20=F0=9F=9A=80=20Ready=20for=20better=20dark=20mode=20?=
 =?UTF-8?q?handling=20=F0=9F=9B=A0=EF=B8=8F=20Simplified=20styles=20and=20?=
 =?UTF-8?q?class=20names=20=F0=9F=93=A6=20Updated=20component=20for=20them?=
 =?UTF-8?q?e=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/SwitchDarkMode2.tsx | 35 ++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/shared/SwitchDarkMode2.tsx

diff --git a/src/shared/SwitchDarkMode2.tsx b/src/shared/SwitchDarkMode2.tsx
new file mode 100644
index 0000000..d0f0899
--- /dev/null
+++ b/src/shared/SwitchDarkMode2.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { useThemeMode } from "@/utils/useThemeMode";
+import { Switch } from "@headlessui/react";
+import React from "react";
+
+export interface SwitchDarkMode2Props {
+  className?: string;
+}
+const SwitchDarkMode2: React.FC<SwitchDarkMode2Props> = ({
+  className = "",
+}) => {
+  const { _toogleDarkMode, isDarkMode, toDark, toLight } = useThemeMode();
+
+  return (
+    <div className="inline-flex">
+      <span className="sr-only">Enable dark mode</span>
+      <Switch
+        checked={isDarkMode}
+        onChange={_toogleDarkMode}
+        className={`${isDarkMode ? "bg-teal-900" : "bg-teal-600"}
+          relative inline-flex h-[22px] w-[42px] shrink-0 cursor-pointer rounded-full border-4 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`}
+      >
+        <span className="sr-only">Enable dark mode</span>
+        <span
+          aria-hidden="true"
+          className={`${isDarkMode ? "translate-x-5" : "translate-x-0"}
+            pointer-events-none inline-block h-[14px] w-[14px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`}
+        />
+      </Switch>
+    </div>
+  );
+};
+
+export default SwitchDarkMode2;