Alexey Pavlov
a16bf812e4
- CSS-переменные --bg, --surface, --ink, --mute, --accent для обеих тем - darkMode: 'class' в Tailwind config - ThemeToggle компонент с Sun/Moon, сохраняет выбор в localStorage - Inline-скрипт в layout.js защищает от FOUC (FlashOfUnstyledContent) - Авто-определение по prefers-color-scheme как fallback - not-found.js: красивая 404 страница вместо дефолтной Next - Обновлены все компоненты и страницы — Header, Footer, ArticleCard, page.js, blog, tag, about
29 lines
1.3 KiB
JavaScript
29 lines
1.3 KiB
JavaScript
import Link from 'next/link';
|
||
import { Sparkles } from 'lucide-react';
|
||
import ThemeToggle from './ThemeToggle';
|
||
|
||
export default function Header() {
|
||
return (
|
||
<header className="sticky top-0 z-20 border-b-soft" style={{ background: 'rgb(var(--bg) / 0.85)', backdropFilter: 'saturate(180%) blur(12px)' }}>
|
||
<div className="container-wide flex items-center justify-between py-4">
|
||
<Link href="/" className="flex items-center gap-2 group">
|
||
<div className="w-8 h-8 rounded-lg flex items-center justify-center transition-colors" style={{ background: 'rgb(var(--accent) / 0.12)' }}>
|
||
<Sparkles className="w-4 h-4 accent" />
|
||
</div>
|
||
<span className="font-bold text-lg tracking-tight ink">ZeroPost</span>
|
||
</Link>
|
||
<nav className="flex items-center gap-1 sm:gap-2 text-sm">
|
||
<Link href="/" className="btn btn-ghost text-sm py-1.5">Статьи</Link>
|
||
<Link href="/about" className="btn btn-ghost text-sm py-1.5">О проекте</Link>
|
||
<a href="https://app.zeropost.ru" className="btn btn-primary text-sm py-1.5 ml-1">
|
||
Кабинет
|
||
</a>
|
||
<div className="ml-1">
|
||
<ThemeToggle />
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
);
|
||
}
|