Cart Button

1// Header cart icon with a live count badge — mount once in your header, as-is.
2// Opens the CartDrawer (mount that once too, anywhere in the page).
3import { useCart } from "../../hooks/storefront/useCart";
4
5export default function CartButton() {
6  const { itemCount, openCart } = useCart();
7  return (
8    <button
9      type="button"
10      aria-label={`Cart, ${itemCount} items`}
11      onClick={openCart}
12      className="relative inline-flex items-center p-1.5 text-foreground transition-opacity hover:opacity-70"
13    >
14      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
15        <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z" />
16        <line x1="3" y1="6" x2="21" y2="6" />
17        <path d="M16 10a4 4 0 01-8 0" />
18      </svg>
19      {itemCount > 0 && (
20        <span className="absolute -right-1 -top-1 flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-bold text-primary-foreground">
21          {itemCount}
22        </span>
23      )}
24    </button>
25  );
26}