Generalize WIP

apps/bridge-frontend/app/(main)/not-facebook/[[...segment]]/@detail/_components/Detail.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { FC } from "react";
+import { Grid } from "@mui/material";
+import { DisplayTextField } from "ui";
+import { FacebookBot } from "@/app/_lib/database";
+import { Detail as InternalDetail } from "@/app/_components/Detail";
+import { deleteFacebookBotAction } from "../../_actions/facebook";
+
+type DetailProps = {
+  row: FacebookBot;
+};
+
+export const Detail: FC<DetailProps> = ({ row }) => (
+  <InternalDetail
+    title={`Facebook Connection: ${row.name}`}
+    entity="facebook"
+    id={row.id}
+    deleteAction={deleteFacebookBotAction}
+  >
+    <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
+      <Grid item xs={12}>
+        <DisplayTextField name="name" label="Name" value={row.name} />
+      </Grid>
+      <Grid item xs={12}>
+        <DisplayTextField
+          name="description"
+          label="Description"
+          lines={3}
+          value={row.description}
+        />
+      </Grid>
+      <Grid item xs={6}>
+        <DisplayTextField name="appId" label="App ID" value={row.appId} />
+      </Grid>
+      <Grid item xs={6}>
+        <DisplayTextField
+          name="appSecret"
+          label="App Secret"
+          value={row.appSecret}
+          copyable
+        />
+      </Grid>
+      <Grid item xs={6}>
+        <DisplayTextField name="pageId" label="Page ID" value={row.pageId} />
+      </Grid>
+      <Grid item xs={6}>
+        <DisplayTextField
+          name="pageAccessToken"
+          label="Page Access Token"
+          value={row.pageAccessToken}
+        />
+      </Grid>
+    </Grid>
+  </InternalDetail>
+);