refactor: implement light/dark themes using cookies

components/Header/Locales/LocaleFlag.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image'
 
-import type { CookiesStore } from '@/i18n/i18n.client'
+import type { CookiesStore } from '@/utils/constants'
 import { useI18n } from '@/i18n/i18n.client'
 
 export interface LocaleFlagProps {

components/Header/Locales/index.tsx

@@ -3,8 +3,8 @@
 import { useCallback, useEffect, useState, useRef } from 'react'
 import classNames from 'clsx'
 
-import { AVAILABLE_LOCALES } from '@/utils/constants'
-import type { CookiesStore } from '@/i18n/i18n.client'
+import type { Locale as LocaleType, CookiesStore } from '@/utils/constants'
+import { LOCALES } from '@/utils/constants'
 
 import { Arrow } from './Arrow'
 import { LocaleFlag } from './LocaleFlag'
@@ -43,7 +43,7 @@ export const Locales = (props: LocalesProps): JSX.Element => {
     }
   }, [])
 
-  const handleLocale = async (locale: string): Promise<void> => {
+  const handleLocale = async (locale: LocaleType): Promise<void> => {
     const { setLocale } = await import('@/i18n/i18n.server')
     setLocale(locale)
   }
@@ -70,7 +70,7 @@ export const Locales = (props: LocalesProps): JSX.Element => {
           { hidden: hiddenMenu }
         )}
       >
-        {AVAILABLE_LOCALES.filter((locale) => {
+        {LOCALES.filter((locale) => {
           return locale !== currentLocale
         }).map((locale) => {
           return (

components/Header/SwitchTheme.tsx

@@ -1,23 +1,22 @@
 'use client'
 
-import { useEffect, useState } from 'react'
 import classNames from 'clsx'
-import { useTheme } from 'next-themes'
 
-export const SwitchTheme: React.FC = () => {
-  const [mounted, setMounted] = useState(false)
-  const { theme, setTheme } = useTheme()
+import { useTheme } from '@/theme/theme.client'
+import type { CookiesStore } from '@/utils/constants'
 
-  useEffect(() => {
-    setMounted(true)
-  }, [])
+export interface SwitchThemeProps {
+  cookiesStore: CookiesStore
+}
 
-  if (!mounted) {
-    return null
-  }
+export const SwitchTheme = (props: SwitchThemeProps): JSX.Element => {
+  const { cookiesStore } = props
+  const theme = useTheme(cookiesStore)
 
-  const handleClick = (): void => {
-    setTheme(theme === 'dark' ? 'light' : 'dark')
+  const handleClick = async (): Promise<void> => {
+    const { setTheme } = await import('@/theme/theme.server')
+    const newTheme = theme === 'dark' ? 'light' : 'dark'
+    setTheme(newTheme)
   }
 
   return (

components/Header/index.tsx

@@ -50,7 +50,7 @@ export const Header: React.FC<HeaderProps> = (props) => {
             cookiesStore={cookiesStore.toString()}
           />
         ) : null}
-        <SwitchTheme />
+        <SwitchTheme cookiesStore={cookiesStore.toString()} />
       </div>
     </header>
   )