54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
"use client"
|
|
|
|
import { ExternalLink } from "lucide-react"
|
|
import type { ArticleGroup, Hit } from "@/lib/types"
|
|
import { TileCard } from "@/components/TileCard"
|
|
import { Badge } from "@/components/ui/badge"
|
|
|
|
interface ResultGroupProps {
|
|
group: ArticleGroup
|
|
selectedHits: Set<number>
|
|
onSelectHit: (hit: Hit) => void
|
|
onClickHit: (hit: Hit) => void
|
|
}
|
|
|
|
export function ResultGroup({
|
|
group,
|
|
selectedHits,
|
|
onSelectHit,
|
|
onClickHit,
|
|
}: ResultGroupProps) {
|
|
return (
|
|
<div className="space-y-2">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-3">
|
|
<h3 className="truncate text-sm font-semibold">{group.title}</h3>
|
|
<Badge variant="secondary">{group.hits.length} tile{group.hits.length !== 1 ? "s" : ""}</Badge>
|
|
<a
|
|
href={group.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="ml-auto flex shrink-0 items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground"
|
|
>
|
|
Open article
|
|
<ExternalLink className="h-3 w-3" />
|
|
</a>
|
|
</div>
|
|
|
|
{/* Horizontal scrollable row of tiles */}
|
|
<div className="flex gap-3 overflow-x-auto pb-2">
|
|
{group.hits.map((hit) => (
|
|
<TileCard
|
|
key={hit.vector_id}
|
|
hit={hit}
|
|
rank={hit.rank}
|
|
selected={selectedHits.has(hit.vector_id)}
|
|
onSelect={onSelectHit}
|
|
onClick={onClickHit}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|