103 lines
4.0 KiB
TypeScript
103 lines
4.0 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link";
|
|
import React from 'react';
|
|
import {CheckCircle2, CreditCard, LayoutGrid, LogOut, SettingsIcon} from "lucide-react";
|
|
import {usePathname} from "next/navigation";
|
|
|
|
function Header() {
|
|
return (
|
|
<header className="sticky top-0 z-30 border-b border-border/60 bg-background/85 backdrop-blur-md">
|
|
<div className="container mx-auto flex h-14 max-w-6xl items-center justify-between gap-4 px-4 md:px-6">
|
|
<div className="flex min-w-0 items-center gap-2 sm:gap-5">
|
|
<Link
|
|
href="/dashboard"
|
|
className="flex shrink-0 items-center gap-2 text-sm font-semibold tracking-tight">
|
|
<div
|
|
className="inline-flex h-7 w-7 items-center justify-center rounded bg-foreground text-[11px] font-bold text-background">
|
|
S
|
|
</div>
|
|
<span className="hidden sm:inline">StoreAI</span>
|
|
</Link>
|
|
<span className="hidden h-5 w-px bg-border/60 md:inline-block" aria-hidden="true"/>
|
|
<NavTabs/>
|
|
</div>
|
|
|
|
<div className="flex shrink-0 items-center gap-3">
|
|
<Link href="/dashboard/billing"
|
|
className={`inline-flex h-7 items-center gap-1.5 rounded-full border px-2.5 text-[11px] font-medium transition-colors border-emerald-200 bg-emerald-50 text-emerald-800 hover:bg-emerald-100`}>
|
|
<CheckCircle2 className="h-3 w-3"/>
|
|
测试
|
|
</Link>
|
|
<span className="hidden h-5 w-px bg-border/60 md:inline-block" aria-hidden="true"/>
|
|
<UserMenu/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
|
|
/**
|
|
* 导航栏
|
|
*/
|
|
const NavTabs = () => {
|
|
const pathname = usePathname();
|
|
const tabs = [
|
|
{href: "/dashboard", label: "Dashboard", icon: LayoutGrid},
|
|
{href: "/dashboard/settings", label: "Settings", icon: SettingsIcon},
|
|
{href: "/dashboard/billing", label: "Billing", icon: CreditCard},
|
|
];
|
|
return (
|
|
<nav className="flex items-center gap-0.5" aria-label="Dashboard navigation">
|
|
{tabs.map(item => {
|
|
const Icon = item.icon;
|
|
const isActive = pathname.startsWith(item.href);
|
|
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`relative inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs font-medium transition-colors sm:px-3 sm:text-sm ${
|
|
isActive
|
|
? "text-foreground"
|
|
: "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
|
|
}`}>
|
|
<Icon className="h-3.5 w-3.5"/>
|
|
<span className="hidden sm:inline">{item.label}</span>
|
|
{isActive && (
|
|
<span
|
|
aria-hidden="true"
|
|
className="absolute -bottom-3.25 left-2 right-2 h-0.5 rounded-t-full bg-foreground"
|
|
/>
|
|
)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
|
|
/**
|
|
* 用户信息
|
|
*/
|
|
const UserMenu = () => {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<div className="hidden max-w-50 truncate text-xs text-muted-foreground md:inline">
|
|
112@qq.com
|
|
</div>
|
|
<div
|
|
className="cursor-pointer inline-flex h-7 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
|
title="Sign out">
|
|
<LogOut className="h-3 w-3"/>
|
|
<span className="hidden sm:inline">Sign out</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
|
|
export default Header
|