Changes

src/components/layout/TopBar.tsx

@@ -0,0 +1,64 @@
+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>
+  );
+}