feat(21-01): enhance catalog detail page with Add to Collection button

- Add image placeholder (package icon) when no imageUrl exists
- Add 'Add to Collection' button stub between specs and description
- Button styled per D-10, logs to console (actual flow wired in Phase 22)
- Consistent layout with item detail page
This commit is contained in:
2026-04-06 15:02:07 +02:00
parent 3228bcadbe
commit 408025bb36

View File

@@ -55,15 +55,27 @@ function GlobalItemDetail() {
</div> </div>
{/* Image */} {/* Image */}
{item.imageUrl && ( <div className="aspect-[16/9] bg-gray-50 rounded-xl overflow-hidden mb-6">
<div className="aspect-[16/9] bg-gray-50 rounded-xl overflow-hidden mb-6"> {item.imageUrl ? (
<img <img
src={item.imageUrl} src={item.imageUrl}
alt={`${item.brand} ${item.model}`} alt={`${item.brand} ${item.model}`}
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
</div> ) : (
)} <div className="w-full h-full flex flex-col items-center justify-center">
<svg
className="w-16 h-16 text-gray-300"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
strokeWidth={1.5}
>
<path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
</svg>
</div>
)}
</div>
{/* Header */} {/* Header */}
<div className="mb-6"> <div className="mb-6">
@@ -114,6 +126,17 @@ function GlobalItemDetail() {
)} )}
</div> </div>
{/* Add to Collection */}
<div className="mb-6">
<button
type="button"
onClick={() => console.log("Add to collection — wired in Phase 22")}
className="bg-gray-700 text-white rounded-lg px-5 py-2.5 text-sm font-medium hover:bg-gray-800 transition-colors"
>
Add to Collection
</button>
</div>
{/* Description */} {/* Description */}
{item.description && ( {item.description && (
<div className="prose prose-sm prose-gray max-w-none"> <div className="prose prose-sm prose-gray max-w-none">