89 lines
3.1 KiB
TypeScript
89 lines
3.1 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 bg-paper-sand border-b-4 border-paper-dark shadow-paper-lg"
|
|
>
|
|
<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.02 }}
|
|
className="flex items-center gap-3 cursor-pointer"
|
|
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
|
|
>
|
|
<div className="p-2 bg-paper-dark border-2 border-paper-brown">
|
|
<FaMusic className="text-2xl text-paper-light" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-xl font-bold text-paper-dark tracking-tight">
|
|
Podzahr
|
|
</h1>
|
|
<p className="text-xs text-paper-brown">Parsa Sadatie</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-paper-dark hover:text-paper-brown transition-colors font-medium border-b-2 border-transparent hover:border-paper-brown"
|
|
>
|
|
Bio
|
|
</button>
|
|
<button
|
|
onClick={() => scrollToSection('albums')}
|
|
className="text-paper-dark hover:text-paper-brown transition-colors font-medium border-b-2 border-transparent hover:border-paper-brown"
|
|
>
|
|
Albums
|
|
</button>
|
|
</div>
|
|
|
|
{/* Cart Button */}
|
|
<motion.button
|
|
whileHover={{ scale: 1.02 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
onClick={onCartClick}
|
|
className="relative p-3 bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark transition-all shadow-paper"
|
|
aria-label="Shopping cart"
|
|
>
|
|
<FaShoppingCart className="text-xl text-paper-light" />
|
|
{cartCount > 0 && (
|
|
<motion.div
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
className="absolute -top-2 -right-2 bg-paper-dark text-paper-light text-xs font-bold border-2 border-paper-brown w-6 h-6 flex items-center justify-center"
|
|
>
|
|
{cartCount}
|
|
</motion.div>
|
|
)}
|
|
</motion.button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</motion.header>
|
|
);
|
|
}
|