File size: 1,400 Bytes
33962ff | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | "use client";
import type { Hit } from "@/lib/api";
import { fmtTs } from "@/lib/format";
export function SegmentCard({
hit,
onPlay,
highlight,
compact = false,
badge,
}: {
hit: Hit;
onPlay: (h: Hit) => void;
highlight?: boolean;
compact?: boolean;
badge?: React.ReactNode;
}) {
return (
<button
onClick={() => onPlay(hit)}
className={`group flex w-full gap-3 rounded-lg border bg-surface p-2 text-left transition-colors hover:bg-surface-2 ${
highlight ? "border-accent" : "border-line"
}`}
>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={hit.frame}
alt=""
className={`${compact ? "h-14 w-24" : "h-20 w-36"} shrink-0 rounded-md bg-black object-cover`}
loading="lazy"
/>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2 text-xs text-muted tabular">
<span className="font-medium text-ink-2">#{hit.rank}</span>
<span>
{fmtTs(hit.start)}–{fmtTs(hit.end)}
</span>
<span className="ml-auto">{hit.score < 1 ? hit.score.toFixed(3) : hit.score.toFixed(4)}</span>
{badge}
</div>
<div className="truncate text-sm font-medium">{hit.title}</div>
{!compact && <p className="line-clamp-2 text-xs text-ink-2">{hit.text}</p>}
</div>
</button>
);
}
|