feat(ui): create toggle theme button on Header

mateusfg7 · Dec 12, 2022 · 64d9c09 · 64d9c09
1 parent da64e89
commit 64d9c09
Showing 1 changed file with 32 additions and 14 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,11 +1,20 @@
 import React from 'react'
 import Link from 'next/link'
+import { useTheme } from 'next-themes'
+import { FiMoon, FiSun } from 'react-icons/fi'
 
 interface Props {
   title: string
 }
 
 export const Header: React.FC<Props> = ({ title }) => {
+  const { theme, setTheme } = useTheme()
+
+  function toggleTheme() {
+    if (theme === 'light') setTheme('dark')
+    else setTheme('light')
+  }
+
   return (
     <header className="flex justify-between items-center mb-24">
       <div className="flex items-center gap-5">
@@ -17,21 +26,30 @@ export const Header: React.FC<Props> = ({ title }) => {
         <span className="text-xs">/</span>
         <h1 className="text-xl font-bold">{title}</h1>
       </div>
-      <nav>
-        <Link
-          href="/"
-          className="text-neutral-900 dark:text-neutral-100 mr-8 hover:underline"
-        >
-          Home
-        </Link>
+      <div className="flex justify-center items-center gap-8">
+        <nav className="flex justify-center items-center gap-5">
+          <Link
+            href="/"
+            className="text-neutral-900 dark:text-neutral-100 hover:underline"
+          >
+            Home
+          </Link>
 
-        <Link
-          href="/categories"
-          className="text-neutral-900 dark:text-neutral-100 mr-8 hover:underline"
-        >
-          Categories
-        </Link>
-      </nav>
+          <Link
+            href="/categories"
+            className="text-neutral-900 dark:text-neutral-100 hover:underline"
+          >
+            Categories
+          </Link>
+        </nav>
+        <button onClick={() => toggleTheme()} className="p-1">
+          {theme === 'light' ? (
+            <FiMoon className="text-xl" />
+          ) : (
+            <FiSun className="text-xl" />
+          )}
+        </button>
+      </div>
     </header>
   )
 }