feat(25-02): add attribution display on catalog detail page

- GlobalItem interface extended with sourceUrl, imageCredit, imageSourceUrl fields
- Attribution block below image: Photo credit and source link when present
- Product page link (sourceUrl) at bottom of detail page
- Image div mb-6 moved to attribution paragraph for consistent spacing
This commit is contained in:
2026-04-10 11:05:52 +02:00
parent df6c75f164
commit e4a65314bd
2 changed files with 37 additions and 1 deletions

View File

@@ -10,6 +10,9 @@ interface GlobalItem {
priceCents: number | null;
imageUrl: string | null;
description: string | null;
sourceUrl: string | null;
imageCredit: string | null;
imageSourceUrl: string | null;
createdAt: string;
}

View File

@@ -62,7 +62,7 @@ function GlobalItemDetail() {
</div>
{/* Image */}
<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">
{item.imageUrl ? (
<img
src={item.imageUrl}
@@ -84,6 +84,25 @@ function GlobalItemDetail() {
)}
</div>
{/* Attribution */}
{(item.imageCredit || item.imageSourceUrl) && (
<p className="text-xs text-gray-400 mt-1 mb-6">
{item.imageCredit && <span>Photo: {item.imageCredit}</span>}
{item.imageCredit && item.imageSourceUrl && <span> · </span>}
{item.imageSourceUrl && (
<a
href={item.imageSourceUrl}
target="_blank"
rel="noopener noreferrer"
className="underline hover:text-gray-600 transition-colors"
>
Source
</a>
)}
</p>
)}
{!(item.imageCredit || item.imageSourceUrl) && <div className="mb-6" />}
{/* Header */}
<div className="mb-6">
<p className="text-xs font-medium text-gray-400 uppercase tracking-wide mb-1">
@@ -169,6 +188,20 @@ function GlobalItemDetail() {
<p className="text-gray-600 leading-relaxed">{item.description}</p>
</div>
)}
{/* Product page link */}
{item.sourceUrl && (
<div className="mt-4">
<a
href={item.sourceUrl}
target="_blank"
rel="noopener noreferrer"
className="text-sm text-blue-500 hover:text-blue-600 underline transition-colors"
>
View product page &rarr;
</a>
</div>
)}
</div>
);
}