75 lines
3.1 KiB
TypeScript
75 lines
3.1 KiB
TypeScript
import Link from "next/link";
|
||
import { Search, Heart, User, ShoppingCart } from "lucide-react";
|
||
import { useState, useEffect } from "react";
|
||
import { motion } from "framer-motion";
|
||
import Image from "next/image";
|
||
|
||
export default function Header() {
|
||
// Состояние для отслеживания прокрутки страницы
|
||
const [scrolled, setScrolled] = useState(false);
|
||
|
||
// Эффект для отслеживания прокрутки
|
||
useEffect(() => {
|
||
const handleScroll = () => {
|
||
const isScrolled = window.scrollY > 50;
|
||
if (isScrolled !== scrolled) {
|
||
setScrolled(isScrolled);
|
||
}
|
||
};
|
||
|
||
window.addEventListener('scroll', handleScroll);
|
||
return () => {
|
||
window.removeEventListener('scroll', handleScroll);
|
||
};
|
||
}, [scrolled]);
|
||
|
||
return (
|
||
<header className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-white shadow-sm' : 'bg-transparent'}`}>
|
||
<nav className={`py-4 transition-all duration-300 ${scrolled ? 'text-black' : 'text-white'}`}>
|
||
<div className="container mx-auto px-4 flex items-center justify-between">
|
||
<div className="flex items-center space-x-6">
|
||
<Link href="/catalog" className="text-sm font-medium hover:opacity-70 transition-opacity">
|
||
Каталог
|
||
</Link>
|
||
<Link href="/new" className="text-sm font-medium hover:opacity-70 transition-opacity">
|
||
Новинки
|
||
</Link>
|
||
<Link href="/stores" className="text-sm font-medium hover:opacity-70 transition-opacity">
|
||
Магазины
|
||
</Link>
|
||
</div>
|
||
<Link href="/" className="text-2xl font-bold">
|
||
<div className="relative h-10 w-32">
|
||
<Image
|
||
src="/logo.png"
|
||
alt="Brand Logo"
|
||
layout="fill"
|
||
objectFit="contain"
|
||
/>
|
||
</div>
|
||
</Link>
|
||
<div className="flex items-center space-x-5">
|
||
<button className="hover:opacity-70 transition-opacity">
|
||
<Search className="w-5 h-5" />
|
||
</button>
|
||
<Link href="/favorites" className="relative hover:opacity-70 transition-opacity">
|
||
<Heart className="w-5 h-5" />
|
||
<span className={`absolute -top-2 -right-2 ${scrolled ? 'bg-black text-white' : 'bg-white text-black'} text-xs rounded-full w-4 h-4 flex items-center justify-center`}>
|
||
0
|
||
</span>
|
||
</Link>
|
||
<Link href="/account" className="hover:opacity-70 transition-opacity">
|
||
<User className="w-5 h-5" />
|
||
</Link>
|
||
<Link href="/cart" className="relative hover:opacity-70 transition-opacity">
|
||
<ShoppingCart className="w-5 h-5" />
|
||
<span className={`absolute -top-2 -right-2 ${scrolled ? 'bg-black text-white' : 'bg-white text-black'} text-xs rounded-full w-4 h-4 flex items-center justify-center`}>
|
||
0
|
||
</span>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
);
|
||
}
|