Jean-Luc Makiola
a9d624dc83
- Create useThreads/useCandidates TanStack Query hooks - Extend uiStore with candidate panel and resolve dialog state - Add ThreadTabs component for gear/planning tab switching - Add ThreadCard component with candidate count and price range chips - Refactor index.tsx to tabbed HomePage with PlanningView - Create placeholder thread detail route for navigation target
78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
import { useNavigate } from "@tanstack/react-router";
|
|
import { formatPrice } from "../lib/formatters";
|
|
|
|
interface ThreadCardProps {
|
|
id: number;
|
|
name: string;
|
|
candidateCount: number;
|
|
minPriceCents: number | null;
|
|
maxPriceCents: number | null;
|
|
createdAt: string;
|
|
status: "active" | "resolved";
|
|
}
|
|
|
|
function formatDate(iso: string): string {
|
|
const d = new Date(iso);
|
|
return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
|
|
}
|
|
|
|
function formatPriceRange(
|
|
min: number | null,
|
|
max: number | null,
|
|
): string | null {
|
|
if (min == null && max == null) return null;
|
|
if (min === max) return formatPrice(min);
|
|
return `${formatPrice(min)} - ${formatPrice(max)}`;
|
|
}
|
|
|
|
export function ThreadCard({
|
|
id,
|
|
name,
|
|
candidateCount,
|
|
minPriceCents,
|
|
maxPriceCents,
|
|
createdAt,
|
|
status,
|
|
}: ThreadCardProps) {
|
|
const navigate = useNavigate();
|
|
|
|
const isResolved = status === "resolved";
|
|
const priceRange = formatPriceRange(minPriceCents, maxPriceCents);
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
navigate({ to: "/threads/$threadId", params: { threadId: String(id) } })
|
|
}
|
|
className={`w-full text-left bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all p-4 ${
|
|
isResolved ? "opacity-60" : ""
|
|
}`}
|
|
>
|
|
<div className="flex items-start justify-between mb-2">
|
|
<h3 className="text-sm font-semibold text-gray-900 truncate">
|
|
{name}
|
|
</h3>
|
|
{isResolved && (
|
|
<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-500 shrink-0">
|
|
Resolved
|
|
</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-purple-50 text-purple-700">
|
|
{candidateCount} {candidateCount === 1 ? "candidate" : "candidates"}
|
|
</span>
|
|
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
|
|
{formatDate(createdAt)}
|
|
</span>
|
|
{priceRange && (
|
|
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700">
|
|
{priceRange}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|