Template
Rami BitarandClaude Opus 5
e04f1e0405
- Cart drawer: single-column layout matching the site — no bag icon, no dividers, square images, tighter type, discount code form, estimated total, and a Go to Checkout button - Cart: per-line loading state so one row's update no longer disables every other row or the checkout button - Discounts: cartDiscountCodesUpdate mutation plus discountCodes on the cart fragment, wired to an applyDiscountCode store action - Products: fix "load more" returning the same first page — the query now takes an `after` cursor and getProductsPage exposes pageInfo - Collections: cards match the product cards (no border, radius, blurb, or CTA row) at 4-up on desktop and 2-up on mobile; section headers match the products section - Shop Pay: cart permalink with payment=shop_pay instead of the hosted shop-js element - Buttons converted to the shadcn Button component throughout - PDP: swipeable image carousel with dots on mobile, sticky info column, colour swatches never fall back to variant photos - Rename the store from Stride to Shop; larger header wordmark Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX
53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
|
|
interface CollectionImage {
|
|
url: string;
|
|
altText?: string;
|
|
}
|
|
|
|
interface Collection {
|
|
id: string;
|
|
title: string;
|
|
handle: string;
|
|
description?: string;
|
|
image?: CollectionImage;
|
|
}
|
|
|
|
interface CollectionCardProps {
|
|
collection: Collection;
|
|
}
|
|
|
|
const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
|
|
return (
|
|
<Link
|
|
href={`/collections/${collection.handle}`}
|
|
className="group block h-full"
|
|
>
|
|
{/* Collection Image */}
|
|
<div className="relative aspect-square overflow-hidden bg-white">
|
|
{collection.image ? (
|
|
<img
|
|
src={collection.image.url}
|
|
alt={collection.image.altText || collection.title}
|
|
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.04]"
|
|
/>
|
|
) : (
|
|
<div className="absolute inset-0 flex items-center justify-center text-zinc-300">
|
|
<i className="ri-folder-line text-8xl"></i>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Collection Info */}
|
|
<div className="flex flex-col flex-1 py-2.5">
|
|
<h3 className="text-sm font-medium text-foreground line-clamp-1">
|
|
{collection.title}
|
|
</h3>
|
|
</div>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default CollectionCard;
|