Create/detail updates

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

@@ -1,35 +1,46 @@
 "use client";
 
 import { FC } from "react";
-import { Grid, Box, Dialog } from "@mui/material";
+import { Grid } from "@mui/material";
 import { useRouter } from "next/navigation";
-import { typography } from "@/app/_styles/theme";
+import { Dialog, Button } from "ui";
 
 interface DetailProps {
   title: string;
   entity: string;
+  id: string;
   children: any;
 }
 
-export const Detail: FC<DetailProps> = ({ title, entity, children }) => {
+export const Detail: FC<DetailProps> = ({ title, entity, id, children }) => {
   const router = useRouter();
-  const { h3 } = typography;
 
   return (
     <Dialog
-      open={true}
+      open
+      title={title}
       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>
+      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 item>{children}</Grid>
         </Grid>
-      </Box>
+      }
+    >
+      {children}
     </Dialog>
   );
 };