92 lines
3.6 KiB
TypeScript
92 lines
3.6 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from "react"
|
||
import Link from "next/link"
|
||
import { Search } from "./search"
|
||
import { Button } from "./ui/button"
|
||
import { ShoppingCart, Heart, Package2, User, Menu } from 'lucide-react'
|
||
import { CatalogMenu } from "./catalog-menu"
|
||
import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet"
|
||
import { useCart } from "@/contexts/cart-context"
|
||
import { useFavorites } from "@/contexts/favorites-context"
|
||
import { Badge } from "./ui/badge"
|
||
|
||
export function Header() {
|
||
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
||
const { getTotalItems } = useCart()
|
||
const { getTotalFavorites } = useFavorites()
|
||
|
||
return (
|
||
<header className="border-b sticky top-0 bg-white z-50">
|
||
<div className="container mx-auto px-4">
|
||
<div className="flex h-16 items-center justify-between">
|
||
<div className="flex items-center gap-4">
|
||
<Link href="/" className="text-2xl font-bold text-blue-600">
|
||
STORE
|
||
</Link>
|
||
<div className="hidden md:block">
|
||
<CatalogMenu />
|
||
</div>
|
||
</div>
|
||
<div className="hidden md:block flex-1 max-w-xl mx-4">
|
||
<Search />
|
||
</div>
|
||
<div className="flex items-center gap-4">
|
||
<div className="hidden md:flex items-center gap-4">
|
||
<Button variant="ghost" size="icon" asChild>
|
||
<Link href="/profile">
|
||
<User className="h-5 w-5" />
|
||
</Link>
|
||
</Button>
|
||
<Button variant="ghost" size="icon">
|
||
<Package2 className="h-5 w-5" />
|
||
</Button>
|
||
<Button variant="ghost" size="icon" className="relative" asChild>
|
||
<Link href="/favorites">
|
||
<Heart className="h-5 w-5" />
|
||
{getTotalFavorites() > 0 && (
|
||
<Badge variant="destructive" className="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0">
|
||
{getTotalFavorites()}
|
||
</Badge>
|
||
)}
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
<Button variant="ghost" size="icon" asChild className="relative">
|
||
<Link href="/cart">
|
||
<ShoppingCart className="h-5 w-5" />
|
||
{getTotalItems() > 0 && (
|
||
<Badge variant="destructive" className="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0">
|
||
{getTotalItems()}
|
||
</Badge>
|
||
)}
|
||
</Link>
|
||
</Button>
|
||
<Sheet open={isMenuOpen} onOpenChange={setIsMenuOpen}>
|
||
<SheetTrigger asChild>
|
||
<Button variant="ghost" size="icon" className="md:hidden">
|
||
<Menu className="h-5 w-5" />
|
||
</Button>
|
||
</SheetTrigger>
|
||
<SheetContent side="left" className="w-[300px] sm:w-[400px]">
|
||
<nav className="flex flex-col gap-4">
|
||
<Link href="/" onClick={() => setIsMenuOpen(false)}>Главная</Link>
|
||
<Link href="/profile" onClick={() => setIsMenuOpen(false)}>Профиль</Link>
|
||
<Link href="/cart" onClick={() => setIsMenuOpen(false)}>Корзина</Link>
|
||
<div className="md:hidden">
|
||
<CatalogMenu />
|
||
</div>
|
||
</nav>
|
||
</SheetContent>
|
||
</Sheet>
|
||
</div>
|
||
</div>
|
||
<div className="md:hidden mt-2 mb-4">
|
||
<Search />
|
||
</div>
|
||
</div>
|
||
</header>
|
||
)
|
||
}
|
||
|