feat: compare (premium), rating-history trend, hover previews

2026-08-02 12:48:02 +02:00
parent 0c27982098
commit c77610786b
18 changed files with 911 additions and 13 deletions
@@ -0,0 +1,54 @@
+import { Link } from "wouter";
+import type { ToolWithStats } from "@workspace/api-client-react";
+
+import { Badge } from "@/components/ui/badge";
+import { RatingStars } from "@/components/rating-stars";
+import { MiniBars } from "@/components/mini-bars";
+
+export function ToolPreviewCard({ tool }: { tool: ToolWithStats }) {
+  return (
+    <div className="space-y-3">
+      <div>
+        <div className="flex items-start justify-between gap-2">
+          <div className="min-w-0">
+            <div className="font-semibold leading-tight truncate">{tool.name}</div>
+            <div className="text-xs text-muted-foreground">{tool.category}</div>
+          </div>
+          <RatingStars value={tool.avgCombined ?? 0} size="sm" />
+        </div>
+      </div>
+
+      <p className="text-xs text-muted-foreground line-clamp-3">{tool.description}</p>
+
+      <div className="space-y-1.5">
+        <div className="flex items-center justify-between text-xs">
+          <span className="text-muted-foreground">{tool.ratingCount} review{tool.ratingCount === 1 ? "" : "s"}</span>
+          <span className="font-semibold tabular-nums">
+            {tool.avgCombined != null ? tool.avgCombined.toFixed(1) : "–"}/5
+          </span>
+        </div>
+        <MiniBars usefulness={tool.avgUsefulness} usability={tool.avgUsability} />
+      </div>
+
+      {tool.tags && tool.tags.length > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {tool.tags.slice(0, 4).map((tag) => (
+            <Badge key={tag} variant="secondary" className="text-[10px]">
+              {tag}
+            </Badge>
+          ))}
+          {tool.tags.length > 4 && (
+            <span className="text-[10px] text-muted-foreground">+{tool.tags.length - 4}</span>
+          )}
+        </div>
+      )}
+
+      <Link
+        href={`/tools/${tool.id}`}
+        className="block w-full rounded-md border border-primary/40 bg-primary/5 px-3 py-1.5 text-center text-xs font-medium text-primary hover:bg-primary/10"
+      >
+        View details
+      </Link>
+    </div>
+  );
+}