66 lines
2.9 KiB
TypeScript
66 lines
2.9 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import Link from 'next/link'
|
||
|
|
import { Menu, X, Moon, Sun } from 'lucide-react'
|
||
|
|
import { useState, useEffect } from 'react'
|
||
|
|
|
||
|
|
export default function Header() {
|
||
|
|
const [open, setOpen] = useState(false)
|
||
|
|
const [dark, setDark] = useState(false)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const isDark = document.documentElement.classList.contains('dark')
|
||
|
|
setDark(isDark)
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
const toggleDark = () => {
|
||
|
|
document.documentElement.classList.toggle('dark')
|
||
|
|
setDark(!dark)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<header className="sticky top-0 z-50 border-b border-gray-200 dark:border-gray-800 bg-white/95 dark:bg-gray-950/95 backdrop-blur">
|
||
|
|
<div className="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
|
||
|
|
<Link href="/" className="flex items-center gap-2">
|
||
|
|
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center text-white font-bold text-sm">
|
||
|
|
RL
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div className="text-sm font-bold text-gray-900 dark:text-white">Rock Liang</div>
|
||
|
|
<div className="text-xs text-gray-600 dark:text-gray-400">Software Engineer Lead</div>
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
|
||
|
|
<nav className="hidden md:flex gap-8 items-center">
|
||
|
|
<Link href="/" className="text-sm hover:text-blue-600 dark:hover:text-blue-400">Home</Link>
|
||
|
|
<Link href="/cluster" className="text-sm hover:text-blue-600 dark:hover:text-blue-400">Cluster</Link>
|
||
|
|
<Link href="/infrastructure" className="text-sm hover:text-blue-600 dark:hover:text-blue-400">Infrastructure</Link>
|
||
|
|
<Link href="/kafka" className="text-sm hover:text-blue-600 dark:hover:text-blue-400">Kafka</Link>
|
||
|
|
<Link href="/cicd" className="text-sm hover:text-blue-600 dark:hover:text-blue-400">CI/CD</Link>
|
||
|
|
<Link href="/agent" className="text-sm hover:text-blue-600 dark:hover:text-blue-400">Agent</Link>
|
||
|
|
<button onClick={toggleDark} className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded">
|
||
|
|
{dark ? <Sun size={20} /> : <Moon size={20} />}
|
||
|
|
</button>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<button
|
||
|
|
onClick={() => setOpen(!open)}
|
||
|
|
className="md:hidden p-2"
|
||
|
|
>
|
||
|
|
{open ? <X size={24} /> : <Menu size={24} />}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{open && (
|
||
|
|
<div className="md:hidden border-t border-gray-200 dark:border-gray-800 p-4 space-y-2">
|
||
|
|
<Link href="/" className="block py-2 text-sm hover:text-blue-600">Home</Link>
|
||
|
|
<Link href="/infrastructure" className="block py-2 text-sm hover:text-blue-600">Infrastructure</Link>
|
||
|
|
<Link href="/kafka" className="block py-2 text-sm hover:text-blue-600">Kafka</Link>
|
||
|
|
<Link href="/cicd" className="block py-2 text-sm hover:text-blue-600">CI/CD</Link>
|
||
|
|
<Link href="/agent" className="block py-2 text-sm hover:text-blue-600">Agent</Link>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</header>
|
||
|
|
)
|
||
|
|
}
|