import { useRef } from 'react'
import { useRouter } from 'next/router'
import { Container } from '../components/Container'
function SunIcon(props) {
return (
)
}
function MoonIcon(props) {
return (
)
}
function ModeToggle() {
function disableTransitionsTemporarily() {
document.documentElement.classList.add('[&_*]:!transition-none')
window.setTimeout(() => {
document.documentElement.classList.remove('[&_*]:!transition-none')
}, 0)
}
function toggleMode() {
disableTransitionsTemporarily()
let darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
let isSystemDarkMode = darkModeMediaQuery.matches
let isDarkMode = document.documentElement.classList.toggle('dark')
if (isDarkMode === isSystemDarkMode) {
delete window.localStorage.isDarkMode
} else {
window.localStorage.isDarkMode = isDarkMode
}
}
return (
)
}
export function Header() {
let isHomePage = useRouter().pathname === '/'
let headerRef = useRef()
return (
<>
{isHomePage && }
)
}