Spaces:
Running
Running
File size: 2,881 Bytes
0dd2082 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import './Header.css';
export default function Header() {
const pathname = usePathname();
const isActive = (path) => pathname === path;
return (
<header className="header">
<div className="header-inner">
<Link href="/" className="header-brand">
<div className="header-logo">
<div className="header-logo">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" className="thread-logo">
<path d="M4 16C4 16 8 8 16 8C24 8 28 16 28 16C28 16 24 24 16 24C8 24 4 16 4 16Z" className="thread-path-outer" />
<circle cx="16" cy="16" r="3" className="thread-core" />
<path d="M2 16H30" className="thread-line" />
</svg>
</div>
</div>
<h1 className="header-title">RedThread</h1>
<span className="header-badge">AI</span>
</Link>
<nav className="header-nav">
<Link href="/" className={`header-link ${isActive('/') ? 'active' : ''}`}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>
Search
</Link>
<Link href="/history" className={`header-link ${isActive('/history') ? 'active' : ''}`}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
</svg>
History
</Link>
<Link href="/about" className={`header-link ${isActive('/about') ? 'active' : ''}`}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" />
</svg>
About
</Link>
<span className="header-status">
<span className="status-dot"></span>
Online
</span>
</nav>
</div>
</header>
);
}
|