feat: Add theme system support to AppHeader component

lucasm · Aug 16, 2024 · cd91480 · cd91480
1 parent 7cfbc25
commit cd91480
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 8 deletions.
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
@@ -33,6 +33,7 @@ import {
   Icon,
   IconMore,
   IconGames,
+  IconThemeSystem,
 } from '@/components/SvgIcons'
 import { normalizeId } from '@/utils/formats'
 import { ISearchCategory } from '@/interfaces/search'
@@ -70,13 +71,18 @@ export default function AppHeader() {
     !isMobileViewport && refSearchInput.current.focus()
   }
   const handleTheme = () => {
-    if (theme == 'light') {
+    if (theme === 'light') {
       setTheme('dark')
-      window.localStorage.setItem('theme', 'dark')
-    } else {
-      setTheme('light')
-      window.localStorage.setItem('theme', 'light')
+      return
+    }
+
+    if (theme === 'dark') {
+      setTheme('system')
+      return
     }
+
+    // Assumindo que se não for 'light' ou 'dark', é 'system'
+    setTheme('light')
   }
   const handleCategory = (category: string) => {
     try {
@@ -265,8 +271,18 @@ export default function AppHeader() {
             <h3>{t('theme')}</h3>
 
             <button onClick={handleTheme}>
-              {theme == 'dark' ? <IconMoon /> : <IconSun />}
-              {theme == 'dark' ? 'Dark' : 'Light'}
+              {theme === 'dark' ? (
+                <IconMoon />
+              ) : theme === 'light' ? (
+                <IconSun />
+              ) : (
+                <IconThemeSystem />
+              )}
+              {theme === 'dark'
+                ? 'Dark'
+                : theme === 'light'
+                ? 'Light'
+                : 'System'}
             </button>
           </div>
 

diff --git a/components/SvgIcons/index.tsx b/components/SvgIcons/index.tsx
@@ -665,14 +665,26 @@ export const IconInfo = () => (
   <svg
     width="24"
     height="24"
-    strokeWidth=".7"
     fill="currentColor"
+    strokeWidth=".7"
     stroke="currentColor"
     viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg">
     <path d="M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999Zm0 1.5a8.502 8.502 0 1 0 0 17.003A8.502 8.502 0 0 0 12 3.5Zm-.004 7a.75.75 0 0 1 .744.648l.007.102.003 5.502a.75.75 0 0 1-1.493.102l-.007-.101-.003-5.502a.75.75 0 0 1 .75-.75ZM12 7.003a.999.999 0 1 1 0 1.997.999.999 0 0 1 0-1.997Z" />
   </svg>
 )
+export const IconThemeSystem = () => (
+  <svg
+    width="24"
+    height="24"
+    fill="currentColor"
+    strokeWidth=".7"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.75 22a.75.75 0 0 1-.102-1.493l.102-.007h1.749v-2.498H4.25a2.25 2.25 0 0 1-2.245-2.096L2 15.752V5.25a2.25 2.25 0 0 1 2.096-2.245L4.25 3h15.499a2.25 2.25 0 0 1 2.245 2.096l.005.154v10.502a2.25 2.25 0 0 1-2.096 2.245l-.154.005h-4.25V20.5h1.751a.75.75 0 0 1 .102 1.494L17.25 22H6.75Zm7.248-3.998h-4l.001 2.498h4l-.001-2.498ZM19.748 4.5H4.25a.75.75 0 0 0-.743.648L3.5 5.25v10.502c0 .38.282.694.648.743l.102.007h15.499a.75.75 0 0 0 .743-.648l.007-.102V5.25a.75.75 0 0 0-.648-.743l-.102-.007Z" />
+  </svg>
+)
 
 export const IconX = () => (
   <svg