43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
import { ShoppingCart, Sparkles } from "lucide-react";
|
|
|
|
interface HeaderProps {
|
|
cartItemCount?: number;
|
|
onCartClick?: () => void;
|
|
}
|
|
|
|
const Header = ({ cartItemCount = 0, onCartClick }: HeaderProps) => {
|
|
return (
|
|
<header className="fixed top-0 left-0 right-0 z-50 glass border-b border-border/50">
|
|
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
|
|
{/* Logo */}
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 rounded-2xl bg-primary flex items-center justify-center shadow-zoe">
|
|
<Sparkles className="w-7 h-7 text-primary-foreground" />
|
|
</div>
|
|
<span className="text-2xl font-extrabold text-primary">ZOE</span>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h1 className="hidden md:block text-lg font-bold text-foreground">
|
|
Comprar licença
|
|
</h1>
|
|
|
|
{/* Cart button */}
|
|
<button
|
|
onClick={onCartClick}
|
|
className="relative p-3 rounded-2xl bg-secondary hover:bg-secondary/80 transition-all duration-300 hover:scale-105 active:scale-95"
|
|
>
|
|
<ShoppingCart className="w-6 h-6 text-secondary-foreground" />
|
|
{cartItemCount > 0 && (
|
|
<span className="absolute -top-1 -right-1 w-6 h-6 rounded-full bg-accent text-accent-foreground text-xs font-bold flex items-center justify-center animate-bounce-soft">
|
|
{cartItemCount}
|
|
</span>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|