import '@styles/globals.css' import { GeistProvider, CssBaseline, useTheme } from '@geist-ui/core' import { useEffect, useMemo, useState } from 'react' import type { AppProps as NextAppProps } from "next/app"; import useSharedState from '@lib/hooks/use-shared-state'; import 'react-loading-skeleton/dist/skeleton.css' import { SkeletonTheme } from 'react-loading-skeleton'; import Head from 'next/head'; import { ThemeProps } from '@lib/types'; import Cookies from 'js-cookie'; type AppProps

= { pageProps: P; } & Omit, "pageProps">; function MyApp({ Component, pageProps }: AppProps) { const [themeType, setThemeType] = useSharedState('theme', Cookies.get('drift-theme') || 'light') useEffect(() => { const storedTheme = Cookies.get('drift-theme') if (storedTheme) setThemeType(storedTheme) // TODO: useReducer? }, [setThemeType, themeType]) const changeTheme = () => { const newTheme = themeType === 'dark' ? 'light' : 'dark' localStorage.setItem('drift-theme', newTheme) setThemeType(last => (last === 'dark' ? 'light' : 'dark')) } const skeletonBaseColor = useMemo(() => { if (themeType === 'dark') return '#333' return '#eee' }, [themeType]) const skeletonHighlightColor = useMemo(() => { if (themeType === 'dark') return '#555' return '#ddd' }, [themeType]) return ( <> Drift ) } export default MyApp