84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { useShopifyCart } from '@/hooks/use-shopify-cart';
|
|
import config from '@/lib/config.json';
|
|
import { RiSearchLine, RiShoppingBagLine } from '@remixicon/react';
|
|
import SearchDialog from './search-dialog';
|
|
|
|
const CartIcon: React.FC = () => {
|
|
const { toggleCart, itemCount } = useShopifyCart();
|
|
|
|
return (
|
|
<button
|
|
onClick={toggleCart}
|
|
className="relative p-1 text-black hover:text-gray-600 transition-colors"
|
|
>
|
|
<RiShoppingBagLine size={20} />
|
|
{itemCount > 0 && (
|
|
<span className="absolute -top-1 -right-1 bg-black text-white text-[10px] rounded-full w-4 h-4 flex items-center justify-center font-medium">
|
|
{itemCount > 99 ? '99+' : itemCount}
|
|
</span>
|
|
)}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
const Header: React.FC = () => {
|
|
const [searchOpen, setSearchOpen] = useState(false);
|
|
|
|
return (
|
|
<nav className="bg-white/70 backdrop-blur-md border-b border-gray-200/60 sticky top-0 z-30 h-14">
|
|
<div className="container mx-auto px-4 h-full">
|
|
<div className="flex justify-between items-center h-full">
|
|
{/* Logo */}
|
|
<Link href="/" className="text-lg font-medium text-black font-heading">
|
|
{config.brand.logo.url ? (
|
|
<img
|
|
src={config.brand.logo.url}
|
|
alt={config.brand.logo.alt || 'Store'}
|
|
className="h-8"
|
|
/>
|
|
) : (
|
|
'Store'
|
|
)}
|
|
</Link>
|
|
|
|
{/* Navigation Links */}
|
|
<div className="flex items-center space-x-6">
|
|
<Link
|
|
href="/"
|
|
className="text-sm text-black hover:text-gray-600 font-medium transition-colors"
|
|
>
|
|
Products
|
|
</Link>
|
|
<Link
|
|
href="/collections"
|
|
className="text-sm text-black hover:text-gray-600 font-medium transition-colors"
|
|
>
|
|
Collections
|
|
</Link>
|
|
|
|
{/* Search + Cart Icons */}
|
|
<div className="flex items-center space-x-2">
|
|
<button
|
|
onClick={() => setSearchOpen(true)}
|
|
className="p-1 text-black hover:text-gray-600 transition-colors"
|
|
aria-label="Search products"
|
|
>
|
|
<RiSearchLine size={20} />
|
|
</button>
|
|
<CartIcon />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<SearchDialog open={searchOpen} onOpenChange={setSearchOpen} />
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Header;
|