65 lines
2.3 KiB
TypeScript
65 lines
2.3 KiB
TypeScript
|
import { Search, Bell, ChevronDown } from 'lucide-react';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
interface TopBarProps {
|
||
|
|
title: string;
|
||
|
|
description?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function TopBar({ title, description }: TopBarProps) {
|
||
|
|
return (
|
||
|
|
<header className="sticky top-0 z-30 flex h-20 items-center justify-between bg-background/80 backdrop-blur-sm px-8 border-b border-border/30">
|
||
|
|
{/* Page Title */}
|
||
|
|
<div>
|
||
|
|
<h1 className="text-2xl font-bold text-foreground">{title}</h1>
|
||
|
|
{description && (
|
||
|
|
<p className="text-sm text-muted-foreground">{description}</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Right Section */}
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
{/* Search */}
|
||
|
|
<div className="relative">
|
||
|
|
<Search className="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="Search partners, events..."
|
||
|
|
className={cn(
|
||
|
|
"h-10 w-64 pl-11 pr-4 rounded-xl text-sm",
|
||
|
|
"bg-secondary text-foreground placeholder:text-muted-foreground",
|
||
|
|
"shadow-neu-inset focus:outline-none focus:ring-2 focus:ring-accent/50",
|
||
|
|
"transition-all duration-200"
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Notifications */}
|
||
|
|
<button
|
||
|
|
className={cn(
|
||
|
|
"relative h-10 w-10 flex items-center justify-center rounded-xl",
|
||
|
|
"neu-button"
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Bell className="h-5 w-5 text-muted-foreground" />
|
||
|
|
<span className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center rounded-full bg-error text-[10px] font-bold text-error-foreground">
|
||
|
|
3
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{/* Profile */}
|
||
|
|
<button className="flex items-center gap-3 pl-4 pr-3 py-2 rounded-xl neu-button">
|
||
|
|
<div className="h-8 w-8 rounded-lg bg-primary shadow-neu-inset-sm flex items-center justify-center">
|
||
|
|
<span className="text-sm font-bold text-primary-foreground">AS</span>
|
||
|
|
</div>
|
||
|
|
<div className="text-left">
|
||
|
|
<p className="text-sm font-medium text-foreground">Admin User</p>
|
||
|
|
<p className="text-xs text-muted-foreground">Super Admin</p>
|
||
|
|
</div>
|
||
|
|
<ChevronDown className="h-4 w-4 text-muted-foreground" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
);
|
||
|
|
}
|