opencode
96 lines
3.2 KiB
TypeScript
96 lines
3.2 KiB
TypeScript
import { Link } from "wouter";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Star, MessageSquare, Wrench, Scale } from "lucide-react";
|
|
import { ToolWithStats } from "@workspace/api-client-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { MiniBarStack } from "@/components/mini-bars";
|
|
|
|
export const TABLE_GRID =
|
|
"grid-cols-[minmax(0,2fr)_minmax(0,1fr)_80px_80px]";
|
|
|
|
export function ToolRow({
|
|
tool,
|
|
density,
|
|
className,
|
|
compare,
|
|
}: {
|
|
tool: ToolWithStats;
|
|
density: "cozy" | "compact";
|
|
className?: string;
|
|
compare?: { selected: boolean; onToggle: () => void };
|
|
}) {
|
|
const compact = density === "compact";
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"grid items-center gap-3 border-b border-border/60 hover:bg-muted/40 cursor-pointer",
|
|
TABLE_GRID,
|
|
compact ? "py-1.5" : "py-3",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-3 min-w-0">
|
|
{compare && (
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
compare.onToggle();
|
|
}}
|
|
title={compare.selected ? "Remove from compare" : "Add to compare"}
|
|
className={cn(
|
|
"shrink-0 w-6 h-6 rounded border flex items-center justify-center transition-colors",
|
|
compare.selected
|
|
? "bg-primary text-primary-foreground border-primary"
|
|
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
|
)}
|
|
>
|
|
<Scale className="w-3.5 h-3.5" />
|
|
</button>
|
|
)}
|
|
<div className="shrink-0 w-8 h-8 rounded-md border bg-muted flex items-center justify-center overflow-hidden">
|
|
{tool.iconUrl ? (
|
|
<img
|
|
src={tool.iconUrl}
|
|
alt=""
|
|
className="w-full h-full object-contain p-0.5"
|
|
onError={(e) => {
|
|
(e.target as HTMLImageElement).style.display = "none";
|
|
}}
|
|
/>
|
|
) : (
|
|
<Wrench className="w-4 h-4 text-muted-foreground" />
|
|
)}
|
|
</div>
|
|
<div className="min-w-0">
|
|
<Link href={`/tools/${tool.id}`} className="font-medium hover:text-primary hover:underline truncate block">
|
|
{tool.name}
|
|
</Link>
|
|
{!compact && (
|
|
<div className="text-xs text-muted-foreground truncate max-w-[32rem]">{tool.description}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Badge variant="outline" className="text-xs">
|
|
{tool.category}
|
|
</Badge>
|
|
</div>
|
|
<div className="flex items-center justify-end gap-1">
|
|
<div className="flex flex-col items-end gap-0.5">
|
|
<div className="flex items-center gap-1">
|
|
<Star className="w-4 h-4 fill-primary text-primary" />
|
|
<span className="font-medium">{tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}</span>
|
|
</div>
|
|
{!compact && <MiniBarStack usefulness={tool.avgUsefulness} usability={tool.avgUsability} />}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-end gap-1 text-muted-foreground">
|
|
<MessageSquare className="w-4 h-4" />
|
|
<span>{tool.ratingCount}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|