6e13451dc4
- Next.js 14 blog application with theme support - Docker containerization with volume bindings - Traefik integration with Let's Encrypt SSL - MDX support for blog posts - Theme toggle with localStorage persistence - Scheduled posts directory structure - Brand guidelines compliance with CHORUS colors 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
72 lines
2.7 KiB
TypeScript
72 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { useState, useEffect } from 'react'
|
|
import ThreeLogo from './ThreeLogo'
|
|
import ThemeToggle from './ThemeToggle'
|
|
|
|
export default function BlogHeader() {
|
|
const [isScrolled, setIsScrolled] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 0)
|
|
}
|
|
|
|
window.addEventListener('scroll', handleScroll)
|
|
return () => window.removeEventListener('scroll', handleScroll)
|
|
}, [])
|
|
|
|
return (
|
|
<header className={`sticky top-0 z-50 transition-all duration-300 ${
|
|
isScrolled
|
|
? 'bg-white/80 dark:bg-carbon-950/80 backdrop-blur-md border-b border-carbon-200/50 dark:border-carbon-800/50'
|
|
: 'bg-white/20 dark:bg-carbon-950/20 backdrop-blur-sm'
|
|
}`}>
|
|
<nav className="blog-container py-4">
|
|
<div className="flex items-center justify-between">
|
|
<Link href="/" className="flex items-center space-x-3 group">
|
|
<div className="w-14 h-14 group-hover:scale-110 transition-transform">
|
|
<ThreeLogo className="w-full h-full" />
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="font-logo font-semibold text-lg leading-none text-carbon-900 dark:text-carbon-100">CHORUS</span>
|
|
<span className="text-carbon-600 dark:text-carbon-500 text-xs font-medium">PING!</span>
|
|
</div>
|
|
</Link>
|
|
|
|
<div className="hidden md:flex items-center space-x-8">
|
|
<Link
|
|
href="/"
|
|
className="text-carbon-600 dark:text-carbon-300 hover:text-carbon-900 dark:hover:text-carbon-100 transition-colors font-medium"
|
|
>
|
|
All Posts
|
|
</Link>
|
|
<Link
|
|
href="/tags"
|
|
className="text-carbon-600 dark:text-carbon-300 hover:text-carbon-900 dark:hover:text-carbon-100 transition-colors font-medium"
|
|
>
|
|
Topics
|
|
</Link>
|
|
<Link
|
|
href="https://chorus.services"
|
|
className="text-carbon-600 dark:text-carbon-300 hover:text-carbon-900 dark:hover:text-carbon-100 transition-colors font-medium"
|
|
>
|
|
About CHORUS
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-4">
|
|
<ThemeToggle />
|
|
<Link
|
|
href="https://chorus.services"
|
|
className="px-4 py-2 bg-carbon-900 dark:bg-mulberry-700 hover:bg-carbon-800 dark:hover:bg-mulberry-600 text-white dark:text-mulberry-100 rounded-lg font-medium transition-colors text-sm"
|
|
>
|
|
Join Waitlist
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
)
|
|
} |