Spaces:
Running
Running
File size: 3,911 Bytes
03e2430 | 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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | "use client"
import type { ComponentType, CSSProperties } from "react"
import { useRouter } from "next/navigation"
import { BarChart3, Boxes, ChevronRight, Sparkles } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import type { DeveloperListItem } from "@/lib/dashboard-data-client"
interface DeveloperCardProps {
developer: DeveloperListItem
delayMs?: number
}
export function DeveloperCard({ developer, delayMs = 0 }: DeveloperCardProps) {
const router = useRouter()
return (
<Card
className="motion-academic-enter motion-academic-surface motion-academic-hover group cursor-pointer overflow-hidden border-border/70 bg-card hover:shadow-lg"
style={{ "--enter-delay": `${delayMs}ms` } as CSSProperties}
onClick={() => router.push(`/developers/${developer.route_id}`)}
>
<CardHeader className="space-y-3 border-b border-border/60 pb-4">
<div className="text-[10px] font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Developer Summary
</div>
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
<div className="truncate text-xl font-bold">{developer.developer}</div>
<div className="mt-1 text-sm text-muted-foreground">
Aggregated reporting across published model variants and their most common single benchmarks
</div>
</div>
<ChevronRight className="mt-1 h-5 w-5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
</div>
</CardHeader>
<CardContent className="space-y-4 pt-4">
<div className="grid gap-2 sm:grid-cols-3">
<MetricPill
icon={Boxes}
label="Models"
value={developer.model_count.toLocaleString()}
tone="bg-sky-100/80 text-sky-900 dark:bg-sky-950/40 dark:text-sky-100"
/>
<MetricPill
icon={BarChart3}
label="Benchmarks"
value={developer.benchmark_count.toLocaleString()}
tone="bg-amber-100/80 text-amber-900 dark:bg-amber-950/40 dark:text-amber-100"
/>
<MetricPill
icon={Sparkles}
label="Results"
value={developer.evaluation_count.toLocaleString()}
tone="bg-emerald-100/80 text-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-100"
/>
</div>
<div className="rounded-xl border bg-muted/10 p-3">
<div className="mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
Scores From
</div>
<div className="flex flex-wrap gap-2">
{developer.popular_evals.length > 0 ? (
developer.popular_evals.map((evaluation) => (
<Badge key={evaluation.benchmark} variant="secondary">
{evaluation.benchmark}
<span className="ml-1 text-muted-foreground">· {evaluation.model_count}</span>
</Badge>
))
) : (
<span className="text-sm text-muted-foreground">No benchmark coverage indexed yet</span>
)}
</div>
</div>
</CardContent>
</Card>
)
}
function MetricPill({
icon: Icon,
label,
value,
tone,
}: {
icon: ComponentType<{ className?: string }>
label: string
value: string
tone: string
}) {
return (
<div className={`flex items-center justify-between rounded-xl px-3 py-2 ${tone}`}>
<div className="flex items-center gap-2">
<Icon className="h-4 w-4" />
<span className="text-[11px] font-semibold uppercase tracking-[0.18em] opacity-80">
{label}
</span>
</div>
<span className="text-sm font-bold">{value}</span>
</div>
)
}
|