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

"use client";

import { FC } from "react";
import { Grid, Box, Dialog } from "@mui/material";
import { useRouter } from "next/navigation";
import { typography } from "@/app/_styles/theme";

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

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

  return (
    <Dialog
      open={true}
      onClose={() => router.push(`/${entity}`)}
      fullScreen
      sx={{ backgroundColor: "#ddd" }}
    >
      <Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
        <Grid container direction="column">
          <Grid item>
            <Box sx={h3}>{title}</Box>
          </Grid>
          <Grid item>{children}</Grid>
        </Grid>
      </Box>
    </Dialog>
  );
};