Spaces:
Running
Running
File size: 3,586 Bytes
dbdd6d1 5a2d59c dbdd6d1 0b45710 5a2d59c dbdd6d1 5a2d59c dbdd6d1 5a2d59c dbdd6d1 5a2d59c dbdd6d1 0b45710 dbdd6d1 0b45710 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 | "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, routeIdToPath } 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) {
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) => {
return (
<tr key={dev.route_id}>
<td>
<Link
href={`/developers/${routeIdToPath(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>
</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/${routeIdToPath(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>
)
}
|