DataTable

function Logs() {
  const [open, setOpen] = useState<LogRow | null>(null);
  const [n, setN] = useState(60);
  const data = useMemo(() => logs.slice(0, n), [n]);
  return (
    <div className="h-480 w-full overflow-y-auto scrollbar-quiet">
      <DataTable
        aria-label="Request logs"
        data={data}
        columns={columns}
        getRowId={(r) => r.id}
        selectable
        activeRowId={open?.id}
        onRowClick={setOpen}
        rowMenu={(r) => (
          <>
            <Menu.Item icon={icons.openExternal} onClick={() => setOpen(r)}>
              Open request
            </Menu.Item>
            <Menu.Item icon={icons.copy}>Copy request id</Menu.Item>
            <Menu.Item icon={icons.filter}>Filter by {r.model}</Menu.Item>
          </>
        )}
        hasMore={n < logs.length}
        onLoadMore={() => setN((x) => x + 60)}
      />
      <Sheet
        open={!!open}
        onOpenChange={(o) => !o && setOpen(null)}
        title={open ? `${open.method} ${open.endpoint}` : ""}
        subtitle={open?.id}
        size="md"
        modal={false}
      >
        {open && (
          <div className="flex flex-col gap-24">
            <RequestTimeline ttfbMs={open.ttfbMs} totalMs={open.latencyMs} />
            <KeyValue
              items={[
                { label: "Status", value: <StatusCode code={open.status} showText /> },
                { label: "Model", value: open.model, mono: true },
                { label: "Key", value: open.key },
                { label: "Cost", value: `$${open.cost}` },
              ]}
            />
          </div>
        )}
      </Sheet>
    </div>
  );
}