Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Link product images to detail pages, not just titles

Browse Source 
Image sits as a sibling to the badge/WishlistButton overlays, not
wrapping them — nested interactive elements would be invalid HTML and
would fire navigation on a wishlist click.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-08-02 08:19:42 +00:00
parent 7f95711048
commit c065a3223f
1 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/ProductCard.tsx
+23 -7
View File
@@ -57,13 +57,29 @@ export function ProductCard({
className={`group bg-bg-base border border-border rounded-md overflow-hidden flex flex-col h-full transition-transform duration-300 hover:-translate-y-1 ${className}`}
>
<div className="relative w-full aspect-[276/210] overflow-hidden">
<Image
src={product.image}
alt={product.name}
fill
sizes="(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw"
className={`object-cover transition-transform duration-500 group-hover:scale-105 ${fullyOutOfStock ? "opacity-60" : ""}`}
/>
{/* Link wraps only the image, not the whole header — WishlistButton
below is its own interactive element and sits as a sibling, not
nested inside this Link (nested interactive elements are both
invalid HTML and would fire navigation on a wishlist click). */}
{product.href ? (
<Link href={product.href} aria-label={product.name} className="absolute inset-0 z-0">
<Image
src={product.image}
alt={product.name}
fill
sizes="(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw"
className={`object-cover transition-transform duration-500 group-hover:scale-105 ${fullyOutOfStock ? "opacity-60" : ""}`}
/>
</Link>
) : (
<Image
src={product.image}
alt={product.name}
fill
sizes="(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw"
className={`object-cover transition-transform duration-500 group-hover:scale-105 ${fullyOutOfStock ? "opacity-60" : ""}`}
/>
)}
{topLeftBadge !== undefined ? (
topLeftBadge
) : fullyOutOfStock ? (