Jean-Luc Makiola
edc9793c2d
Replace isPublic boolean with visibility enum (private/link/public) across the full stack. Add shares table to schema for future share link support. Update all services, routes, schemas, hooks, components, and tests. Plan: 32-01 (Setup Sharing System - Schema Migration) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { Link } from "@tanstack/react-router";
|
|
import { useFormatters } from "../hooks/useFormatters";
|
|
|
|
interface SetupCardProps {
|
|
id: number;
|
|
name: string;
|
|
visibility?: "private" | "link" | "public";
|
|
itemCount: number;
|
|
totalWeight: number;
|
|
totalCost: number;
|
|
}
|
|
|
|
export function SetupCard({
|
|
id,
|
|
name,
|
|
visibility,
|
|
itemCount,
|
|
totalWeight,
|
|
totalCost,
|
|
}: SetupCardProps) {
|
|
const { weight, price } = useFormatters();
|
|
return (
|
|
<Link
|
|
to="/setups/$setupId"
|
|
params={{ setupId: String(id) }}
|
|
className="block w-full text-left bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-md transition-all p-4"
|
|
>
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex items-center gap-1.5 min-w-0">
|
|
<h3 className="text-sm font-semibold text-gray-900 truncate">
|
|
{name}
|
|
</h3>
|
|
{visibility && visibility !== "private" && (
|
|
<span
|
|
className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-medium shrink-0 ${
|
|
visibility === "public"
|
|
? "bg-green-50 text-green-600"
|
|
: "bg-blue-50 text-blue-600"
|
|
}`}
|
|
>
|
|
{visibility === "public" ? "Public" : "Link"}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-400 shrink-0">
|
|
{itemCount} {itemCount === 1 ? "item" : "items"}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-400">
|
|
{weight(totalWeight)}
|
|
</span>
|
|
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-500">
|
|
{price(totalCost)}
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|