Function ProviderPage

packages/web/src/render.tsx:869–900

(props: {
  providerId: string;
  provider: CatalogProvider;
  models: ProviderModelEntry[];
})

}

function ProviderPage(props: {
  providerId: string;
  provider: CatalogProvider;
  models: ProviderModelEntry[];
}) {
  return (
    <Fragment>
      <DetailHeader
        eyebrow={<a href="/providers">Providers</a>}
        title={props.provider.name}
        code={props.providerId}
        copyValue={props.providerId}
      />
      <Facts
        items={[
          ["Models", props.models.length],
          ["Package", <span class="mono">{props.provider.npm}</span>],
          ["API", <span class="mono">{props.provider.api ?? "-"}</span>],
          [
            "Docs",
            <a href={props.provider.doc} target="_blank" rel="noopener noreferrer">
              Provider docs
            </a>,
          ],
        ]}
      />
      <TableSection title="Models" count={props.models.length} columns={9}>
        <ProviderModelsTable models={props.models} mode="provider" showLab={false} />
      </TableSection>
    </Fragment>
  );
}

function LabPage(props: { lab: LabEntry }) {
  return (