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:
@@ -55,15 +55,27 @@ function GlobalItemDetail() {
|
||||
</div>
|
||||
|
||||
{/* 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
|
||||
src={item.imageUrl}
|
||||
alt={`${item.brand} ${item.model}`}
|
||||
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 */}
|
||||
<div className="mb-6">
|
||||
@@ -114,6 +126,17 @@ function GlobalItemDetail() {
|
||||
)}
|
||||
</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 */}
|
||||
{item.description && (
|
||||
<div className="prose prose-sm prose-gray max-w-none">
|
||||
|
||||
Reference in New Issue
Block a user