link-stack/packages/bridge-ui/components/List.tsx

"use client";

import { FC } from "react";
import { useRouter } from "next/navigation";
import { List as InternalList, Button } from "ui";
import { type Selectable } from "kysely";
import { type Database } from "bridge-common";
import { serviceConfig } from "../config/config";
import { getBasePath } from "../lib/frontendUtils";

type ListProps = {
  service: string;
  rows: Selectable<keyof Database>[];
};

export const List: FC<ListProps> = ({ service, rows }) => {
  const { displayName, entity, listColumns } = serviceConfig[service];
  const title = `${displayName}s`;
  const router = useRouter();

  const onRowClick = (id: string) => {
    router.push(`${getBasePath()}${entity}/${id}`);
  };

  return (
    <InternalList
      title={title}
      rows={rows}
      columns={listColumns}
      onRowClick={onRowClick}
      buttons={
        <Button
          text="Create"
          kind="primary"
          href={`${getBasePath()}${entity}/create`}
        />
      }
    />
  );
};