feat(26-03): enhance PublicSetupCard with itemCount and creatorName
- Add optional itemCount and creatorName fields to PublicSetupCardProps - Render item count badge (blue pill) when itemCount > 0 - Render creator attribution line when creatorName is present - Reorder card layout: name, creator, then count/date row - Add cursor-pointer to Link className - Backward compatible: existing usages passing only id/name/createdAt unaffected
This commit is contained in:
@@ -5,6 +5,8 @@ interface PublicSetupCardProps {
|
|||||||
id: number;
|
id: number;
|
||||||
name: string;
|
name: string;
|
||||||
createdAt: string;
|
createdAt: string;
|
||||||
|
itemCount?: number;
|
||||||
|
creatorName?: string | null;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -22,12 +24,24 @@ export function PublicSetupCard({ setup }: PublicSetupCardProps) {
|
|||||||
<Link
|
<Link
|
||||||
to="/setups/$setupId"
|
to="/setups/$setupId"
|
||||||
params={{ setupId: String(setup.id) }}
|
params={{ setupId: String(setup.id) }}
|
||||||
className="block bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-md transition-all p-4"
|
className="block bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-md transition-all p-4 cursor-pointer"
|
||||||
>
|
>
|
||||||
<h3 className="text-sm font-semibold text-gray-900 truncate">
|
<h3 className="text-sm font-semibold text-gray-900 truncate">
|
||||||
{setup.name}
|
{setup.name}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-xs text-gray-400 mt-1">{formattedDate}</p>
|
{setup.creatorName && (
|
||||||
|
<p className="text-xs text-gray-400 mt-0.5">by {setup.creatorName}</p>
|
||||||
|
)}
|
||||||
|
<div className="flex items-center justify-between mt-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{setup.itemCount != null && setup.itemCount > 0 && (
|
||||||
|
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-400">
|
||||||
|
{setup.itemCount} {setup.itemCount === 1 ? "item" : "items"}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-gray-400">{formattedDate}</p>
|
||||||
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user