Jean-Luc Makiola
0bf1c68043
- 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
48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import { Link } from "@tanstack/react-router";
|
|
|
|
interface PublicSetupCardProps {
|
|
setup: {
|
|
id: number;
|
|
name: string;
|
|
createdAt: string;
|
|
itemCount?: number;
|
|
creatorName?: string | null;
|
|
};
|
|
}
|
|
|
|
export function PublicSetupCard({ setup }: PublicSetupCardProps) {
|
|
const formattedDate = new Date(setup.createdAt).toLocaleDateString(
|
|
undefined,
|
|
{
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "numeric",
|
|
},
|
|
);
|
|
|
|
return (
|
|
<Link
|
|
to="/setups/$setupId"
|
|
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 cursor-pointer"
|
|
>
|
|
<h3 className="text-sm font-semibold text-gray-900 truncate">
|
|
{setup.name}
|
|
</h3>
|
|
{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>
|
|
);
|
|
}
|