Jean-Luc Makiola
9bcdcc7168
Switch all interactive UI elements (buttons, focus rings, active tabs, FAB, links, spinners) from blue to gray to match icon colors for a more cohesive look. Mute card badge text colors to pastels (blue-400, green-500, purple-500) to keep the focus on card content. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
import { useNavigate } from "@tanstack/react-router";
|
|
import { formatPrice } from "../lib/formatters";
|
|
import { LucideIcon } from "../lib/iconData";
|
|
|
|
interface ThreadCardProps {
|
|
id: number;
|
|
name: string;
|
|
candidateCount: number;
|
|
minPriceCents: number | null;
|
|
maxPriceCents: number | null;
|
|
createdAt: string;
|
|
status: "active" | "resolved";
|
|
categoryName: string;
|
|
categoryIcon: string;
|
|
}
|
|
|
|
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,
|
|
categoryName,
|
|
categoryIcon,
|
|
}: 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-gray-50 text-gray-600">
|
|
<LucideIcon
|
|
name={categoryIcon}
|
|
size={16}
|
|
className="inline-block mr-1 text-gray-500"
|
|
/>{" "}
|
|
{categoryName}
|
|
</span>
|
|
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-50 text-purple-500">
|
|
{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-500">
|
|
{priceRange}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|