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

"use client";

import { FC } from "react";
import { Grid } from "@mui/material";
import { useRouter } from "next/navigation";
import { Dialog, Button } from "ui";

interface DetailProps {
  title: string;
  entity: string;
  id: string;
  children: any;
}

export const Detail: FC<DetailProps> = ({ title, entity, id, children }) => {
  const router = useRouter();

  return (
    <Dialog
      open
      title={title}
      onClose={() => router.push(`/${entity}`)}
      buttons={
        <Grid container justifyContent="space-between">
          <Grid item container xs="auto" spacing={2}>
            <Grid item>
              <Button text="Delete" kind="destructive" />
            </Grid>
            <Grid item>
              <Button
                text="Edit"
                kind="secondary"
                href={`/${entity}/${id}/edit`}
              />
            </Grid>
          </Grid>
          <Grid item>
            <Button text="Done" kind="primary" href={`/${entity}`} />
          </Grid>
        </Grid>
      }
    >
      {children}
    </Dialog>
  );
};