destructure theme components

PxlSyl · May 23, 2024 · 8bc720e · 8bc720e
1 parent dfb9de7
commit 8bc720e
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 64 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -7,7 +7,7 @@ import Logo from '@/data/logo.svg'
 import Link from './Link'
 import AuthorsMenu from './AuthorsMenu'
 import MobileNav from './MobileNav'
-import ThemeSwitch from './ThemeSwitch'
+import ThemeSwitch from './theme/ThemeSwitch'
 import LangSwitch from './LangSwitch'
 import SearchButton from './search/SearchButton'
 import { useTranslation } from 'app/[locale]/i18n/client'

diff --git a/components/DarkModeSwitch.tsx → components/theme/DarkModeSwitch.tsx b/components/DarkModeSwitch.tsx → components/theme/DarkModeSwitch.tsx
diff --git a/components/ThemeSwitch.tsx → components/theme/ThemeSwitch.tsx b/components/ThemeSwitch.tsx → components/theme/ThemeSwitch.tsx
@@ -1,76 +1,28 @@
 'use client'
 
 import * as React from 'react'
-import { Fragment, useEffect, useState, useRef } from 'react'
-import { useTheme } from 'next-themes'
-import { useOuterClick } from './util/useOuterClick'
+import { Fragment } from 'react'
+import { useThemeSwitch } from './useThemeSwitch'
+import { useOuterClick } from '../util/useOuterClick'
 import { Menu, RadioGroup, Transition } from '@headlessui/react'
 import { DarkModeSwitch } from './DarkModeSwitch'
-
-const Sun = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-    className="h-6 w-6 text-gray-900 transition-transform duration-300 dark:text-gray-100"
-  >
-    <path
-      fillRule="evenodd"
-      d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
-      clipRule="evenodd"
-    />
-  </svg>
-)
-const Moon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-    className="h-6 w-6 text-gray-900 transition-transform duration-300 dark:text-gray-100"
-  >
-    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
-  </svg>
-)
-const Monitor = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 20 20"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="h-6 w-6 text-gray-900 transition-transform duration-300 dark:text-gray-100"
-  >
-    <rect x="3" y="3" width="14" height="10" rx="2" ry="2"></rect>
-    <line x1="7" y1="17" x2="13" y2="17"></line>
-    <line x1="10" y1="13" x2="10" y2="17"></line>
-  </svg>
-)
+import { Monitor, Moon, Sun } from './icons'
 
 const ThemeSwitch = () => {
-  const [mounted, setMounted] = useState(false)
-  const { theme, setTheme, resolvedTheme } = useTheme()
+  const {
+    mounted,
+    theme,
+    menuOpen,
+    darkModeChecked,
+    menubarRef,
+    setDarkModeChecked,
+    setMenuOpen,
+    handleThemeChange
+  } = useThemeSwitch();
 
-  const [menuOpen, setMenuOpen] = useState(false)
-  const menubarRef = useRef<HTMLDivElement>(null)
   useOuterClick(menubarRef, () => setMenuOpen(false))
 
-  useEffect(() => setMounted(true), [])
-
-  const [darkModeChecked, setDarkModeChecked] = useState<boolean>(false)
-
-  useEffect(() => {
-    if (resolvedTheme === 'dark') {
-      setDarkModeChecked(true)
-    }
-  }, [resolvedTheme])
-
-  const handleThemeChange = (newTheme: string) => {
-    setTheme(newTheme)
-    setDarkModeChecked(newTheme === 'dark')
-    setMenuOpen(false)
-  }
+  if (!mounted) return null
 
   return (
     <div ref={menubarRef} className="mr-5">

diff --git a/components/theme/icons/index.tsx b/components/theme/icons/index.tsx
@@ -0,0 +1,42 @@
+export const Sun = () => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      className="h-6 w-6 text-gray-900 transition-transform duration-300 dark:text-gray-100"
+    >
+      <path
+        fillRule="evenodd"
+        d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+
+  export const Moon = () => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      className="h-6 w-6 text-gray-900 transition-transform duration-300 dark:text-gray-100"
+    >
+      <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+    </svg>
+  )
+
+  export const Monitor = () => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-6 w-6 text-gray-900 transition-transform duration-300 dark:text-gray-100"
+    >
+      <rect x="3" y="3" width="14" height="10" rx="2" ry="2"></rect>
+      <line x1="7" y1="17" x2="13" y2="17"></line>
+      <line x1="10" y1="13" x2="10" y2="17"></line>
+    </svg>
+  )
diff --git a/components/theme/useThemeSwitch.ts b/components/theme/useThemeSwitch.ts
@@ -0,0 +1,37 @@
+import { useState, useEffect, useRef } from 'react';
+import { useTheme } from 'next-themes';
+
+export const useThemeSwitch = () => {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme, resolvedTheme } = useTheme();
+
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menubarRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => setMounted(true), []);
+
+  const [darkModeChecked, setDarkModeChecked] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (resolvedTheme === 'dark') {
+      setDarkModeChecked(true);
+    }
+  }, [resolvedTheme]);
+
+  const handleThemeChange = (newTheme: string) => {
+    setTheme(newTheme);
+    setDarkModeChecked(newTheme === 'dark');
+    setMenuOpen(false);
+  };
+
+  return {
+    mounted,
+    theme,
+    menuOpen,
+    darkModeChecked,
+    menubarRef,
+    setDarkModeChecked,
+    setMenuOpen,
+    handleThemeChange
+  };
+};