67 lines
2.6 KiB
TypeScript
67 lines
2.6 KiB
TypeScript
import { Bell, Menu, Search, User } from "lucide-react";
|
|
import React from "react";
|
|
|
|
interface HeaderProps {
|
|
onMenuClick: () => void;
|
|
pageTitle?: string;
|
|
}
|
|
|
|
const Header: React.FC<HeaderProps> = ({ onMenuClick, pageTitle }) => {
|
|
return (
|
|
<header
|
|
data-cmp="Header"
|
|
className="header border-border bg-background/95 sticky top-0 z-20 flex h-16 items-center border-b px-4 backdrop-blur md:px-8"
|
|
>
|
|
{/* 1. Left: Menu button (only on mobile) */}
|
|
<div className="flex flex-1 items-center md:hidden">
|
|
<button
|
|
title="Menu"
|
|
onClick={onMenuClick}
|
|
className="text-foreground hover:bg-muted -ml-2 rounded-md p-2"
|
|
>
|
|
<Menu className="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* 2. Center: Title (only on mobile) */}
|
|
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 md:hidden">
|
|
<span className="text-xl font-bold tracking-tight text-muted-foreground">
|
|
{pageTitle}
|
|
</span>
|
|
</div>
|
|
|
|
{/* 3. Desktop: Search */}
|
|
<div className="relative hidden max-w-xl flex-1 md:flex">
|
|
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search modules, users, or files..."
|
|
className="bg-muted/50 text-foreground focus:ring-primary/20 w-full rounded-lg border-none py-2 pr-4 pl-10 text-sm transition-all focus:ring-2 focus:outline-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* 4. RIGHT SIDE: Notifications and Profile */}
|
|
<div className="flex flex-1 items-center justify-end space-x-4">
|
|
<button
|
|
title="Notifications"
|
|
className="text-muted-foreground hover:text-foreground hover:bg-muted relative rounded-full p-2 transition-colors"
|
|
>
|
|
<Bell className="h-5 w-5" />
|
|
<span className="bg-destructive border-card absolute top-1.5 right-1.5 h-2 w-2 rounded-full border-2"></span>
|
|
</button>
|
|
|
|
<div className="border-border/50 flex items-center space-x-3 border-l pl-4">
|
|
<div className="hidden text-right sm:block text-nowrap">
|
|
<p className="text-foreground text-sm font-medium">Community Admin</p>
|
|
<p className="text-muted-foreground text-xs">Super Administrator</p>
|
|
</div>
|
|
<div className="bg-primary/10 border-primary/20 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border">
|
|
<User className="text-primary h-5 w-5" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header; |