63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
'use client'
|
|
import { useHeaderTheme } from '@/providers/HeaderTheme'
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import React, { useEffect, useState } from 'react'
|
|
|
|
import type { Header } from '@/payload-types'
|
|
|
|
import { Logo } from '@/components/Logo/Logo'
|
|
import { HeaderNav } from './Nav'
|
|
import { useThemeMode } from '@/hooks/useThemeMode'
|
|
|
|
interface HeaderClientProps {
|
|
data: Header
|
|
}
|
|
|
|
function ToggleButton() {
|
|
const { isDark, toggle } = useThemeMode()
|
|
return (
|
|
<button
|
|
onClick={toggle}
|
|
className="flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs transition-all"
|
|
style={{
|
|
border: isDark ? '1px solid rgba(255,255,255,0.2)' : '1px solid rgba(0,0,0,0.15)',
|
|
color: isDark ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.6)',
|
|
background: 'transparent',
|
|
cursor: 'pointer',
|
|
}}
|
|
>
|
|
{isDark ? '☀ Light' : '☾ Dark'}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export const HeaderClient: React.FC<HeaderClientProps> = ({ data }) => {
|
|
const [theme, setTheme] = useState<string | null>(null)
|
|
const { headerTheme, setHeaderTheme } = useHeaderTheme()
|
|
const pathname = usePathname()
|
|
|
|
useEffect(() => {
|
|
setHeaderTheme(null)
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [pathname])
|
|
|
|
useEffect(() => {
|
|
if (headerTheme && headerTheme !== theme) setTheme(headerTheme)
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [headerTheme])
|
|
|
|
return (
|
|
<header className="container relative z-20" {...(theme ? { 'data-theme': theme } : {})}>
|
|
<div className="py-8 flex justify-between">
|
|
<Link href="/">
|
|
<Logo loading="eager" priority="high" className="invert dark:invert-0" />
|
|
</Link>
|
|
<div className="flex items-center gap-3">
|
|
<HeaderNav data={data} />
|
|
<ToggleButton />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|