Initial commit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01F22Ms5Cxam5UHyxaCrtZzu
2026-07-29 11:02:40 -04:00
commit f23332e42c
88 changed files with 7947 additions and 0 deletions
@@ -0,0 +1,51 @@
+"use client";
+
+import { useCart } from "@/lib/cart";
+import { CART_DRAWER_ID, openCartDrawer } from "@/lib/cart-drawer";
+import { cartIconLabel, cartItemCount } from "@/lib/content";
+
+/**
+ * Cart trigger — a `<button>` that opens the cart drawer via `showModal()`
+ * (`hydrogen-cart-drawer` skill). `onClick` calls `openCartDrawer()`, which
+ * calls `HTMLDialogElement.showModal()`; `aria-controls`/`aria-haspopup` keep
+ * the control accessible. The footer `/cart` link is the no-JS cart surface.
+ */
+export function CartTrigger() {
+  const totalQuantity = useCart((state) => state.data.totalQuantity);
+  const cartLabel = cartIconLabel(totalQuantity);
+  const countDisplay = totalQuantity > 99 ? "99+" : String(totalQuantity);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={openCartDrawer}
+        aria-controls={CART_DRAWER_ID}
+        aria-haspopup="dialog"
+        className="text-on-surface focus-visible:outline-accent relative inline-flex h-11 w-11 cursor-pointer items-center justify-center rounded bg-transparent p-0 hover:opacity-70 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 motion-safe:transition motion-safe:active:scale-[0.97]"
+        aria-label={cartLabel}
+      >
+        <CartIcon count={totalQuantity} display={countDisplay} />
+      </button>
+      <span aria-live="polite" aria-atomic="true" className="sr-only">
+        {cartItemCount(totalQuantity)}
+      </span>
+    </>
+  );
+}
+
+function CartIcon({ count, display }: { count: number; display: string }) {
+  return (
+    <span
+      className="relative inline-flex size-5 shrink-0 items-center justify-center"
+      aria-hidden="true"
+    >
+      <img src="/icons/icon-cart.svg" width="20" height="20" alt="" className="size-5" />
+      {count > 0 ? (
+        <span className="bg-interactive text-interactive-text absolute end-0 top-0 flex h-5 w-5 translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full text-xs font-medium">
+          {display}
+        </span>
+      ) : null}
+    </span>
+  );
+}