tegwick
a6e360aaa5
CONTENT-WP-0002-T01 adapts the pinned OnCo visual system under ui/ without the corpus, mark, or kind routes. Assistant: grok Assistant-Session: 01a1346c-fdff-7741-b1af-b7283661554b
29 lines
1.2 KiB
TypeScript
29 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { ResultsTable } from "@/components/ResultsTable";
|
|
import { nextSort, sortRows } from "@/lib/sort-rows";
|
|
import type { RecordRow, SortState } from "@/lib/types";
|
|
|
|
const columns = [
|
|
{ key: "title", label: "Title", sortable: true, render: (row: RecordRow) => row.title },
|
|
{ key: "kindLabel", label: "Kind", sortable: true, render: (row: RecordRow) => <span className="chip">{row.kindLabel}</span> },
|
|
{ key: "tldr", label: "Summary", sortable: true, render: (row: RecordRow) => row.tldr },
|
|
];
|
|
|
|
export function RecordBrowser({ rows }: { rows: RecordRow[] }) {
|
|
const [sort, setSort] = useState<SortState | undefined>({ key: "title", dir: 1 });
|
|
const ordered = sortRows(rows, sort, (row, key) => String(row[key as keyof RecordRow] ?? ""));
|
|
return (
|
|
<section id="records" aria-labelledby="records-heading" className="mx-auto max-w-7xl px-4 py-14 sm:px-6">
|
|
<h2 id="records-heading" className="mb-6 text-2xl">Records</h2>
|
|
<ResultsTable
|
|
columns={columns}
|
|
rows={ordered}
|
|
rowKey={(row) => row.id}
|
|
sort={sort}
|
|
onSort={(key) => setSort((current) => nextSort(current, key))}
|
|
/>
|
|
</section>
|
|
);
|
|
}
|