Spaces:
Running on CPU Spr
Running on CPU Spr
File size: 3,602 Bytes
dbdd6d1 | 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 | "use client"
import Link from "next/link"
import { ArrowUpRight } from "lucide-react"
import type { DeveloperListItem } from "@/lib/dashboard-data-client"
interface DeveloperTableProps {
rows: DeveloperListItem[]
}
export function DeveloperTable({ rows }: DeveloperTableProps) {
const maxModels = rows.reduce((m, r) => Math.max(m, r.model_count), 1)
return (
<div className="overflow-x-auto">
<table className="ec-htable">
<thead>
<tr>
<th style={{ width: "32%" }}>Developer</th>
<th className="num">Models</th>
<th className="num">Benchmarks</th>
<th className="num">Reported results</th>
<th style={{ width: "32%" }}>Top evaluations</th>
<th style={{ width: 90 }} />
</tr>
</thead>
<tbody>
{rows.map((dev) => {
const pct = (dev.model_count / maxModels) * 100
return (
<tr key={dev.route_id}>
<td>
<Link
href={`/developers/${dev.route_id}`}
className="block min-w-0 group"
>
<div className="font-semibold text-[14px] text-[color:var(--fg)] group-hover:text-[color:var(--accent)] transition-colors">
{dev.developer}
</div>
<div className="mt-1 relative h-1 w-32 bg-[color:var(--bg-surface)]">
<div
className="absolute left-0 top-0 bottom-0 bg-[color:var(--accent)] opacity-60"
style={{ width: `${pct}%` }}
/>
</div>
</Link>
</td>
<td className="num font-mono text-[13px]">
{dev.model_count.toLocaleString()}
</td>
<td className="num font-mono text-[13px]">
{dev.benchmark_count.toLocaleString()}
</td>
<td className="num font-mono text-[13px]">
{dev.evaluation_count.toLocaleString()}
</td>
<td>
<div className="flex flex-wrap gap-1.5">
{dev.popular_evals.slice(0, 3).map((ev) => (
<span
key={ev.benchmark}
className="inline-flex items-center gap-1 border border-[color:var(--border-soft)] bg-[color:var(--bg)] px-2 py-0.5 font-mono text-[10px] tracking-[0.04em] text-[color:var(--fg-muted)]"
title={`${ev.benchmark} · ${ev.model_count} models`}
>
<span className="truncate max-w-[120px]">
{ev.benchmark}
</span>
<span className="text-[color:var(--fg-subtle)]">
{ev.model_count}
</span>
</span>
))}
</div>
</td>
<td>
<Link
href={`/developers/${dev.route_id}`}
className="font-mono text-[10px] tracking-[0.12em] uppercase text-[color:var(--accent)] hover:text-[color:var(--accent-hover)] inline-flex items-center gap-1"
>
Open
<ArrowUpRight className="h-3 w-3" aria-hidden />
</Link>
</td>
</tr>
)
})}
</tbody>
</table>
</div>
)
}
|