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>
|
</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">
|
||||||
|
|||||||
Reference in New Issue
Block a user