Template
Rami BitarandClaude Opus 5
82c9626c75
Turn the optimizer back on by dropping images.unoptimized, and widen the Shopify remote pattern to **.shopify.com so any image subdomain resolves. With the optimizer live, remotePatterns is now actually enforced. Convert the seven Shopify CDN call sites: the product/collection cards and the gallery carousel size with fill + sizes, while the cart, order and search thumbnails carry explicit dimensions. The avatar, markdown, attachment, assistant and logo images stay plain <img> — they take blob:/data: or arbitrary hosts that next/image cannot process. The lightbox needs w-auto h-auto: the width and height attributes next/image requires make both axes definite, so max-w/max-h clamp them independently instead of preserving the ratio. object-contain masked that, but the stretched element covered the overlay and ate the backdrop clicks that close the dialog. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015uSQQNWrmiYDRW9L9VnsGC
56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
|
|
interface CollectionImage {
|
|
url: string;
|
|
altText?: string | null;
|
|
}
|
|
|
|
interface Collection {
|
|
id: string;
|
|
title: string;
|
|
handle: string;
|
|
description?: string;
|
|
image?: CollectionImage | null;
|
|
}
|
|
|
|
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">
|
|
{collection.image ? (
|
|
<Image
|
|
src={collection.image.url}
|
|
alt={collection.image.altText || collection.title}
|
|
fill
|
|
sizes="(min-width: 1024px) 25vw, 50vw"
|
|
className="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;
|