added ThemeSwitch component and used it in Header component

Author: steadyfall

src/app/components/ThemeSwitch.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { Moon, Sun } from 'lucide-react'
+import { useState, useEffect } from 'react'
+import { useTheme } from 'next-themes'
+import Image from "next/image"
+
+export default function ThemeSwitch() {
+  const [mounted, setMounted] = useState(false)
+  const { setTheme, resolvedTheme } = useTheme()
+
+  useEffect(() =>  setMounted(true), [])
+
+  if (!mounted) return (
+    <img
+      src="data:image/svg+xml;base64,PHN2ZyBzdHJva2U9IiNGRkZGRkYiIGZpbGw9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMCIgdmlld0JveD0iMCAwIDI0IDI0IiBoZWlnaHQ9IjIwMHB4IiB3aWR0aD0iMjAwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4PSIyIiB5PSIyIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjIiIHJ4PSIyIj48L3JlY3Q+PC9zdmc+Cg=="
+      width={36}
+      height={36}
+      sizes="36x36"
+      alt="Loading Light/Dark Toggle"
+      title="Loading Light/Dark Toggle"
+    />
+    // priority={false}
+  )
+
+  if (resolvedTheme === 'dark') {
+    return <Sun onClick={() => setTheme('light')} />
+  }
+  if (resolvedTheme === 'light') {
+    return <Moon onClick={() => setTheme('dark')} />
+  }
+}

src/app/components/header.tsx

@@ -1,4 +1,5 @@
-import { Moon, Sun, Github, Linkedin, Mail, StickyNote } from 'lucide-react'
+import { Github, Linkedin, Mail, StickyNote } from 'lucide-react'
+import ThemeSwitch from './ThemeSwitch'
 import Image from 'next/image'
 
 export function Header() {
@@ -19,13 +20,7 @@ export function Header() {
             <div className="flex-grow text-center md:text-left">
             <div className="flex items-center justify-center md:justify-start">
                 <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mr-4">Himank Dave</h1>
-                {/* <button
-                onClick={() => setDarkMode(!darkMode)}
-                className="p-2 rounded-full bg-gray-300 dark:bg-gray-700"
-                aria-label="Toggle dark mode"
-                >
-                {darkMode ? <Sun className="w-6 h-6" /> : <Moon className="w-6 h-6" />}
-                </button> */}
+                <ThemeSwitch />
             </div>
             <div className="flex justify-center md:justify-start mt-4 space-x-4">
                 <a href={githubLink} target="_blank" rel="noopener noreferrer" aria-label="GitHub">