File size: 3,644 Bytes
e9a8d0a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | 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>
);
};
|