From 5f3803dc97cdd99112f555d428bd5766ff4408c7 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Sat, 30 Sep 2023 15:15:21 +0300
Subject: [PATCH] add theme toggle button component

---
 src/components/themeToggleBtn.jsx | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/components/themeToggleBtn.jsx

diff --git a/src/components/themeToggleBtn.jsx b/src/components/themeToggleBtn.jsx
new file mode 100644
index 0000000..7b8d6c2
--- /dev/null
+++ b/src/components/themeToggleBtn.jsx
@@ -0,0 +1,30 @@
+import { useTheme } from 'next-themes'
+import Image from 'next/image'
+
+export default function ThemeToggleButton() {
+  const { resolvedTheme, setTheme } = useTheme()
+
+  const toggleThemeHandler = () => {
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
+  }
+
+  return (
+    <button className="w-fit mx-auto" onClick={toggleThemeHandler}>
+      {resolvedTheme === 'light' ? (
+        <Image
+          src="/icons/moon.svg"
+          width={28}
+          height={28}
+          alt="Dark Theme Icon"
+        />
+      ) : (
+        <Image
+          src="/icons/sun.svg"
+          width={28}
+          height={28}
+          alt="Light Theme Icon"
+        />
+      )}
+    </button>
+  )
+}