89 lines
3.0 KiB
TypeScript
89 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { FaMusic, FaShoppingCart } from 'react-icons/fa';
|
|
import { useCart } from '@/lib/CartContext';
|
|
|
|
interface HeaderProps {
|
|
onCartClick?: () => void;
|
|
}
|
|
|
|
export default function Header({ onCartClick }: HeaderProps) {
|
|
const { getCartCount } = useCart();
|
|
const cartCount = getCartCount();
|
|
|
|
const scrollToSection = (id: string) => {
|
|
const element = document.getElementById(id);
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<motion.header
|
|
initial={{ y: -100 }}
|
|
animate={{ y: 0 }}
|
|
className="fixed top-0 left-0 right-0 z-40 glass-effect border-b border-white/10"
|
|
>
|
|
<div className="max-w-7xl mx-auto px-4 md:px-8 py-4">
|
|
<div className="flex items-center justify-between">
|
|
{/* Logo */}
|
|
<motion.div
|
|
whileHover={{ scale: 1.05 }}
|
|
className="flex items-center gap-3 cursor-pointer"
|
|
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
|
|
>
|
|
<div className="p-2 bg-gradient-to-br from-accent-cyan to-accent-orange rounded-lg glow-cyan">
|
|
<FaMusic className="text-2xl text-white" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-accent-cyan to-accent-orange">
|
|
Parsa
|
|
</h1>
|
|
<p className="text-xs text-gray-400">Progressive Rock</p>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="flex items-center gap-6">
|
|
<div className="hidden md:flex items-center gap-8">
|
|
<button
|
|
onClick={() => scrollToSection('bio')}
|
|
className="text-gray-300 hover:text-accent-cyan transition-colors"
|
|
>
|
|
Bio
|
|
</button>
|
|
<button
|
|
onClick={() => scrollToSection('albums')}
|
|
className="text-gray-300 hover:text-accent-cyan transition-colors"
|
|
>
|
|
Albums
|
|
</button>
|
|
</div>
|
|
|
|
{/* Cart Button */}
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
onClick={onCartClick}
|
|
className="relative p-3 bg-white/10 hover:bg-white/20 rounded-lg transition-all"
|
|
aria-label="Shopping cart"
|
|
>
|
|
<FaShoppingCart className="text-xl text-accent-cyan" />
|
|
{cartCount > 0 && (
|
|
<motion.div
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
className="absolute -top-1 -right-1 bg-accent-orange text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center"
|
|
>
|
|
{cartCount}
|
|
</motion.div>
|
|
)}
|
|
</motion.button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</motion.header>
|
|
);
|
|
}
|