vibe coded v1

src/components/DumpCard.tsx

@@ -0,0 +1,58 @@
+import { Link, useNavigate } from "react-router";
+import type { Dump } from "../model.ts";
+import { relativeTime } from "../utils/relativeTime.ts";
+import FilePreview from "./FilePreview.tsx";
+import RichContentCard from "./RichContentCard.tsx";
+import { VoteButton } from "./VoteButton.tsx";
+
+interface DumpCardProps {
+  dump: Dump;
+  voteCount: number;
+  voted: boolean;
+  canVote: boolean;
+  castVote: (id: string) => void;
+  removeVote: (id: string) => void;
+  className?: string;
+}
+
+export function DumpCard({ dump, voteCount, voted, canVote, castVote, removeVote, className }: DumpCardProps) {
+  const navigate = useNavigate();
+
+  return (
+    <li className={`dump-card${className ? ` ${className}` : ""}`}>
+      <div className="dump-card-inner" onClick={() => navigate(`/dumps/${dump.id}`)}>
+        <div
+          className="dump-card-preview"
+          onClick={dump.richContent ? (e) => e.stopPropagation() : undefined}
+        >
+          {dump.kind === "file"
+            ? <FilePreview dump={dump} compact />
+            : dump.richContent
+            ? <RichContentCard richContent={dump.richContent} compact />
+            : <span className="dump-card-preview-icon">🔗</span>}
+        </div>
+
+        <div className="dump-card-body">
+          <Link to={`/dumps/${dump.id}`} className="dump-card-title" onClick={(e) => e.stopPropagation()}>
+            {dump.title}
+          </Link>
+          {dump.comment && <p className="dump-card-comment">{dump.comment}</p>}
+          <time className="dump-card-date" dateTime={dump.createdAt} title={new Date(dump.createdAt).toLocaleString()}>
+            {relativeTime(dump.createdAt)}
+          </time>
+        </div>
+
+        <div className="dump-card-vote" onClick={(e) => e.stopPropagation()}>
+          <VoteButton
+            dumpId={dump.id}
+            count={voteCount}
+            voted={voted}
+            disabled={!canVote}
+            onCast={castVote}
+            onRemove={removeVote}
+          />
+        </div>
+      </div>
+    </li>
+  );
+}