root
68 lines
3.0 KiB
TypeScript
68 lines
3.0 KiB
TypeScript
import { ToolWithStats } from "@workspace/api-client-react";
|
|
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Star, MessageSquare, Wrench } from "lucide-react";
|
|
import { Link } from "wouter";
|
|
|
|
export function ToolCard({ tool }: { tool: ToolWithStats }) {
|
|
return (
|
|
<Card className="hover-elevate transition-all flex flex-col h-full cursor-pointer hover:border-primary/50">
|
|
<Link href={`/tools/${tool.id}`} className="flex flex-col h-full p-0 m-0">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-start gap-3 mb-2">
|
|
<div className="shrink-0 w-9 h-9 rounded-md border bg-muted flex items-center justify-center overflow-hidden">
|
|
{tool.iconUrl ? (
|
|
<img
|
|
src={tool.iconUrl}
|
|
alt={tool.name}
|
|
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="flex-1 min-w-0">
|
|
<div className="flex flex-wrap justify-between items-start gap-x-2 gap-y-1">
|
|
<CardTitle className="text-base truncate min-w-[30%]">{tool.name}</CardTitle>
|
|
<Badge variant="outline" className="shrink-0 text-xs">{tool.category}</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<CardDescription className="line-clamp-2 min-h-[2.5rem]">
|
|
{tool.description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex-1 pb-4">
|
|
<div className="flex flex-wrap gap-1">
|
|
{tool.tags?.slice(0, 3).map((tag) => (
|
|
<Badge key={tag} variant="secondary" className="text-xs px-1.5 py-0">
|
|
{tag}
|
|
</Badge>
|
|
))}
|
|
{(tool.tags?.length || 0) > 3 && (
|
|
<Badge variant="secondary" className="text-xs px-1.5 py-0 text-muted-foreground">
|
|
+{(tool.tags?.length || 0) - 3}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter className="pt-0 flex justify-between items-center text-sm text-muted-foreground border-t p-4 mt-auto">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center gap-1">
|
|
<Star className="w-4 h-4 fill-primary text-primary" />
|
|
<span className="font-medium text-foreground">
|
|
{tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<MessageSquare className="w-4 h-4" />
|
|
<span>{tool.ratingCount}</span>
|
|
</div>
|
|
</div>
|
|
</CardFooter>
|
|
</Link>
|
|
</Card>
|
|
);
|
|
}
|