Spaces:
Sleeping
Sleeping
File size: 4,000 Bytes
dbdd6d1 5a2d59c dbdd6d1 5a2d59c dbdd6d1 5a2d59c dbdd6d1 5a2d59c dbdd6d1 5a2d59c dbdd6d1 5a2d59c 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 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | "use client"
import Link from "next/link"
import { ArrowUpRight, ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react"
import type { DeveloperListItem } from "@/lib/dashboard-data-client"
import { cn } from "@/lib/utils"
export type DeveloperTableSortCol =
| "name"
| "models"
| "benchmarks"
| "results"
interface DeveloperTableProps {
rows: DeveloperListItem[]
sortCol: DeveloperTableSortCol
sortDir: "asc" | "desc"
onSort: (col: DeveloperTableSortCol) => void
}
export function DeveloperTable({ rows, sortCol, sortDir, onSort }: DeveloperTableProps) {
const maxModels = rows.reduce((m, r) => Math.max(m, r.model_count), 1)
function SortIcon({ col }: { col: DeveloperTableSortCol }) {
if (sortCol !== col) return <ChevronsUpDown className="h-3 w-3 opacity-30" aria-hidden />
return sortDir === "asc"
? <ChevronUp className="h-3 w-3" aria-hidden />
: <ChevronDown className="h-3 w-3" aria-hidden />
}
function SortTh({
col,
children,
className,
style,
}: {
col: DeveloperTableSortCol
children: React.ReactNode
className?: string
style?: React.CSSProperties
}) {
const active = sortCol === col
return (
<th
className={className}
style={{
...style,
cursor: "pointer",
userSelect: "none",
color: active ? "var(--fg)" : undefined,
}}
onClick={() => onSort(col)}
>
<span className={cn("inline-flex items-center gap-1", className?.includes("num") && "justify-end")}>
{children}
<SortIcon col={col} />
</span>
</th>
)
}
return (
<div className="overflow-x-auto">
<table className="ec-htable">
<thead>
<tr>
<SortTh col="name" style={{ width: "32%" }}>Developer</SortTh>
<SortTh col="models" className="num">Models</SortTh>
<SortTh col="benchmarks" className="num">Benchmarks</SortTh>
<SortTh col="results" className="num">Reported results</SortTh>
<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>
<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>
)
}
|