From a7a64e0795f3617fee9f3ceaeec383af3c269558 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sat, 9 Sep 2023 16:59:30 +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/SwitchDarkMode.tsx | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/shared/SwitchDarkMode.tsx

diff --git a/src/shared/SwitchDarkMode.tsx b/src/shared/SwitchDarkMode.tsx
new file mode 100644
index 0000000..31fea42
--- /dev/null
+++ b/src/shared/SwitchDarkMode.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import React from "react";
+import { MoonIcon } from "@heroicons/react/24/solid";
+import { SunIcon } from "@heroicons/react/24/outline";
+import { useThemeMode } from "@/utils/useThemeMode";
+export interface SwitchDarkModeProps {
+  className?: string;
+}
+const SwitchDarkMode: React.FC<SwitchDarkModeProps> = ({ className = "" }) => {
+  const { _toogleDarkMode, isDarkMode, toDark, toLight } = useThemeMode();
+
+  return (
+    <button
+      onClick={_toogleDarkMode}
+      className={`self-center text-2xl md:text-3xl w-12 h-12 rounded-full text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 focus:outline-none flex items-center justify-center ${className}`}
+    >
+      <span className="sr-only">Enable dark mode</span>
+      {isDarkMode ? (
+        <MoonIcon className="w-7 h-7" aria-hidden="true" />
+      ) : (
+        <SunIcon className="w-7 h-7" aria-hidden="true" />
+      )}
+    </button>
+  );
+};
+
+export default SwitchDarkMode;