40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useSession } from "next-auth/react";
|
|
import { Search, Bell } from "lucide-react";
|
|
import { AlertBell } from "@/components/layout/alert-bell";
|
|
|
|
export function Header() {
|
|
const { data: session } = useSession();
|
|
const userName = session?.user?.name || session?.user?.email || "用户";
|
|
const initials = userName.slice(0, 2).toUpperCase();
|
|
|
|
return (
|
|
<header className="flex h-16 items-center justify-between border-b border-gray-200 bg-white px-6">
|
|
{/* Left: Search */}
|
|
<div className="relative w-72">
|
|
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="搜索..."
|
|
className="h-10 w-full rounded-full bg-gray-100 pl-10 pr-4 text-sm text-gray-700 placeholder-gray-400 outline-none transition-colors duration-150 focus:bg-gray-50 focus:ring-2 focus:ring-emerald-500/20"
|
|
/>
|
|
</div>
|
|
|
|
{/* Right: Actions */}
|
|
<div className="flex items-center gap-4">
|
|
{/* Notification bell */}
|
|
<AlertBell />
|
|
|
|
{/* User avatar + name */}
|
|
<div className="flex items-center gap-2.5">
|
|
<div className="flex h-9 w-9 items-center justify-center rounded-full bg-emerald-100 text-sm font-semibold text-emerald-700">
|
|
{initials}
|
|
</div>
|
|
<span className="text-sm font-medium text-gray-700">{userName}</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|