import Router, { useRouter } from 'next/router' import Link from 'next/link' import React, { useState } from 'react' import 'react-medium-image-zoom/dist/styles.css' import { ThemeProvider } from 'styled-components' import Footer from '../components/Footer' import Navigation from '../components/Navigation' import { darkTheme, lightTheme } from '../constants/Theme' import * as gtag from '../lib/gtag' import '../styles.css' Router.events.on('routeChangeComplete', (url) => gtag.pageview(url)) export const DarkModeContext = React.createContext({ theme: undefined, toggleDarkMode: undefined, }) const Breadcrumbs = ({ route }: { route: string }) => { if (route === '/[slug]') return ( <p className="fs-12 mb-2 opacity-80"> <Link href={'/'} prefetch={false}> <span className="mr-2 hover:bg-gray-300 dark:hover:bg-gray-900 cursor-pointer"> トップ </span> </Link> <span className="mr-2">/</span> <Link href={'/posts'} prefetch={false}> <span className="mr-2 hover:bg-gray-300 dark:hover:bg-gray-900 cursor-pointer"> 記事一覧 </span> </Link> </p> ) return null } const App = ({ Component, pageProps }) => { const router = useRouter() let defaultTheme if (process.browser) { defaultTheme = window.localStorage.getItem('35d_theme') || 'LIGHT' } const [theme, setTheme] = useState(defaultTheme) const toggleDarkMode = () => { if (process.browser) { window.localStorage.setItem('35d_theme', theme === 'LIGHT' ? 'DARK' : 'LIGHT') } theme === 'LIGHT' ? setTheme('DARK') : setTheme('LIGHT') } return ( <ThemeProvider theme={theme === 'LIGHT' ? lightTheme : darkTheme}> <> <DarkModeContext.Provider value={{ theme, toggleDarkMode }}> <div className="w-full max-w-3xl mx-auto flex flex-wrap items-start overflow-hidden"> <Navigation /> <main className="w-full sm:w-3/4 ml-0 sm:ml-1/4 min-h-screen"> <Breadcrumbs route={router.route} /> <Component {...pageProps} className="w-full sm:w-3/4 sm:-mt-1 ml-0 sm:ml-1/4" /> </main> <Footer /> </div> </DarkModeContext.Provider> </> </ThemeProvider> ) } export default App