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