link-stack/apps/bridge-frontend/app/_components/List.tsx

"use client";

import { FC } from "react";
import { GridColDef } from "@mui/x-data-grid-pro";
import { useRouter } from "next/navigation";
import { List as InternalList, Button } from "ui";
import { colors } from "ui";

interface ListProps {
  title: string;
  entity: string;
  rows: any;
  columns: GridColDef<any>[];
}

export const List: FC<ListProps> = ({ title, entity, rows, columns }) => {
  const router = useRouter();
  const { mediumBlue } = colors;

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

  return (
    <InternalList
      title={title}
      rows={rows}
      columns={columns}
      onRowClick={onRowClick}
      buttons={
        <Button text="New" color={mediumBlue} href={`/${entity}/create`} />
      }
    />
  );
};