| import { Activity, Settings, UserPlus, LogOut, User, LogIn } from 'lucide-react'; |
| import { cn } from '../lib/utils'; |
|
|
| interface HeaderProps { |
| className?: string; |
| onOpenAdminPanel?: () => void; |
| onOpenRegistration?: () => void; |
| onOpenLogin?: () => void; |
| onLogout?: () => void; |
| isLoggedIn?: boolean; |
| isAdmin?: boolean; |
| userEmail?: string; |
| } |
|
|
| export const Header = ({ |
| className, |
| onOpenAdminPanel, |
| onOpenRegistration, |
| onOpenLogin, |
| onLogout, |
| isLoggedIn, |
| isAdmin, |
| userEmail |
| }: HeaderProps) => { |
| return ( |
| <header className={cn('border-b border-border bg-card/50 backdrop-blur-sm', className)}> |
| <div className="container mx-auto px-4 py-3 flex items-center justify-between"> |
| <div className="flex items-center gap-3"> |
| <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center"> |
| <Activity className="w-6 h-6 text-white" /> |
| </div> |
| <div> |
| <h1 className="text-xl font-bold text-foreground">TradeWithLive</h1> |
| <p className="text-xs text-muted-foreground">Influencer P&L Tracker</p> |
| </div> |
| </div> |
| |
| <div className="flex items-center gap-2"> |
| <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-green-500/10 border border-green-500/20"> |
| <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" /> |
| <span className="text-sm font-medium text-green-500">Live Feed</span> |
| </div> |
| |
| {onOpenRegistration && ( |
| <button |
| onClick={onOpenRegistration} |
| className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium hover:from-blue-600 hover:to-purple-700 transition-all text-sm" |
| title="Register as Influencer" |
| > |
| <UserPlus className="w-4 h-4" /> |
| <span className="hidden sm:inline">Register</span> |
| </button> |
| )} |
| |
| {isLoggedIn ? ( |
| <> |
| {isAdmin && onOpenAdminPanel && ( |
| <button |
| onClick={onOpenAdminPanel} |
| className="p-2 rounded-lg hover:bg-accent/50 transition-colors" |
| title="Admin Panel" |
| > |
| <Settings className="w-5 h-5 text-muted-foreground" /> |
| </button> |
| )} |
| |
| <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-accent/50"> |
| <User className="w-4 h-4 text-muted-foreground" /> |
| <span className="text-sm text-foreground hidden sm:inline">{userEmail}</span> |
| </div> |
| |
| {onLogout && ( |
| <button |
| onClick={onLogout} |
| className="p-2 rounded-lg hover:bg-red-500/10 text-red-500 transition-colors" |
| title="Logout" |
| > |
| <LogOut className="w-5 h-5" /> |
| </button> |
| )} |
| </> |
| ) : ( |
| onOpenLogin && ( |
| <button |
| onClick={onOpenLogin} |
| className="flex items-center gap-2 px-4 py-2 rounded-lg border border-border text-foreground hover:bg-accent/50 transition-colors text-sm" |
| title="Login" |
| > |
| <LogIn className="w-4 h-4" /> |
| <span className="hidden sm:inline">Login</span> |
| </button> |
| ) |
| )} |
| </div> |
| </div> |
| </header> |
| ); |
| }; |
|
|
