93 lines
3.0 KiB
TypeScript
93 lines
3.0 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import Link from 'next/link';
|
||
|
|
import { useState } from 'react';
|
||
|
|
import { usePathname } from 'next/navigation';
|
||
|
|
import { Menu, X, Building2, ArrowRight } from 'lucide-react';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
interface NavLink {
|
||
|
|
href: string;
|
||
|
|
label: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const LINKS: NavLink[] = [
|
||
|
|
{ href: '/', label: '首页' },
|
||
|
|
{ href: '/about', label: '关于我们' },
|
||
|
|
{ href: '/products', label: '产品方案' },
|
||
|
|
{ href: '/news', label: '新闻资讯' },
|
||
|
|
{ href: '/team', label: '团队介绍' },
|
||
|
|
{ href: '/contact', label: '联系我们' },
|
||
|
|
];
|
||
|
|
|
||
|
|
export function Header({ siteName }: { siteName: string }) {
|
||
|
|
const pathname = usePathname();
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<header className="sticky top-0 z-40 w-full border-b border-slate-200 bg-white">
|
||
|
|
<div className="container-page flex h-16 items-center justify-between">
|
||
|
|
<Link href="/" className="flex items-center gap-2">
|
||
|
|
<span className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-slate-800 to-slate-900 text-white shadow-md shadow-slate-900/25 ring-1 ring-inset ring-white/10">
|
||
|
|
<Building2 className="h-5 w-5" />
|
||
|
|
</span>
|
||
|
|
<span className="text-base font-bold text-slate-900">
|
||
|
|
{siteName}
|
||
|
|
</span>
|
||
|
|
</Link>
|
||
|
|
|
||
|
|
<nav className="hidden items-center gap-6 md:flex">
|
||
|
|
{LINKS.map((l) => {
|
||
|
|
const active = pathname === l.href || pathname.startsWith(l.href + '/');
|
||
|
|
return (
|
||
|
|
<Link
|
||
|
|
key={l.href}
|
||
|
|
href={l.href}
|
||
|
|
className={cn(
|
||
|
|
'text-sm font-medium transition-colors',
|
||
|
|
active ? 'text-brand-600' : 'text-slate-600 hover:text-slate-900',
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{l.label}
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<Link
|
||
|
|
href="/contact"
|
||
|
|
className="hidden items-center gap-1 rounded-lg bg-slate-900 px-4 py-2 text-sm font-medium text-white shadow-md shadow-slate-900/20 transition-all hover:bg-black hover:shadow-lg hover:shadow-slate-900/30 md:inline-flex"
|
||
|
|
>
|
||
|
|
免费试用
|
||
|
|
<ArrowRight className="h-3.5 w-3.5" />
|
||
|
|
</Link>
|
||
|
|
|
||
|
|
<button
|
||
|
|
className="text-slate-600 md:hidden"
|
||
|
|
aria-label="菜单"
|
||
|
|
onClick={() => setOpen((v) => !v)}
|
||
|
|
>
|
||
|
|
{open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{open && (
|
||
|
|
<div className="border-t border-slate-200/70 bg-white md:hidden">
|
||
|
|
<nav className="container-page flex flex-col py-2">
|
||
|
|
{LINKS.map((l) => (
|
||
|
|
<Link
|
||
|
|
key={l.href}
|
||
|
|
href={l.href}
|
||
|
|
className="py-2 text-sm text-slate-600 hover:text-brand-600"
|
||
|
|
onClick={() => setOpen(false)}
|
||
|
|
>
|
||
|
|
{l.label}
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</header>
|
||
|
|
);
|
||
|
|
}
|