96 lines
3.7 KiB
TypeScript
96 lines
3.7 KiB
TypeScript
import Link from "next/link";
|
||
import { Search, Heart, User, ShoppingCart, ChevronLeft } from "lucide-react";
|
||
import { useState, useEffect } from "react";
|
||
import { motion } from "framer-motion";
|
||
import Image from "next/image";
|
||
import { useRouter } from "next/router";
|
||
|
||
export default function Header() {
|
||
const router = useRouter();
|
||
// Состояние для отслеживания прокрутки страницы
|
||
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]);
|
||
|
||
// Функция для возврата на предыдущую страницу
|
||
const goBack = () => {
|
||
router.back();
|
||
};
|
||
|
||
// Проверяем, находимся ли мы на главной странице
|
||
const isHomePage = router.pathname === "/";
|
||
// Проверяем, находимся ли мы на странице категорий или коллекций
|
||
const isDetailPage = router.pathname.includes("[slug]");
|
||
|
||
return (
|
||
<header className="fixed w-full z-50 transition-all duration-300 bg-white shadow-sm">
|
||
<nav className="py-4 transition-all duration-300 text-black">
|
||
<div className="container mx-auto px-4 flex items-center justify-between">
|
||
<div className="flex items-center space-x-6">
|
||
{/* {isDetailPage && (
|
||
<button
|
||
onClick={goBack}
|
||
className="flex items-center text-sm font-medium hover:opacity-70 transition-opacity mr-4"
|
||
>
|
||
<ChevronLeft className="w-4 h-4 mr-1" />
|
||
Назад
|
||
</button>
|
||
)} */}
|
||
<Link href="/category" className="text-sm font-medium hover:opacity-70 transition-opacity">
|
||
Каталог
|
||
</Link>
|
||
<Link href="/collections" className="text-sm font-medium hover:opacity-70 transition-opacity">
|
||
Коллекции
|
||
</Link>
|
||
<Link href="/new-arrivals" className="text-sm font-medium hover:opacity-70 transition-opacity">
|
||
Новинки
|
||
</Link>
|
||
</div>
|
||
|
||
<Link href="/" className="absolute left-1/2 transform -translate-x-1/2">
|
||
<div className="relative h-10 w-32">
|
||
<Image
|
||
src="/logo.png"
|
||
alt="Brand Logo"
|
||
fill
|
||
className="object-contain"
|
||
priority
|
||
/>
|
||
</div>
|
||
</Link>
|
||
|
||
<div className="flex items-center space-x-5">
|
||
<Link href="/favorites" className="relative hover:opacity-70 transition-opacity">
|
||
<Heart className="w-5 h-5" />
|
||
<span className="absolute -top-2 -right-2 bg-black text-white 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 bg-black text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">
|
||
0
|
||
</span>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
);
|
||
}
|