Generalize WIP

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

@@ -0,0 +1,45 @@
+"use client";
+
+import { FC } from "react";
+import { Grid } from "@mui/material";
+import { DisplayTextField } from "ui";
+import { Selectable } from "kysely";
+import { Database } from "@/app/_lib/database";
+import { Detail as InternalDetail } from "@/app/_components/Detail";
+import { generateDeleteAction } from "@/app/_lib/actions";
+import { serviceConfig } from "@/app/_lib/config";
+
+type DetailProps = {
+  service: string;
+  row: Selectable<keyof Database>;
+};
+
+export const Detail: FC<DetailProps> = ({ service, row }) => {
+  const {
+    [service]: { entity, table, displayName, displayFields: fields },
+  } = serviceConfig;
+  const deleteAction = generateDeleteAction({ entity, table });
+
+  return (
+    <InternalDetail
+      title={`${displayName}: ${row.name}`}
+      entity={entity}
+      id={row.id as string}
+      deleteAction={deleteAction}
+    >
+      <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
+        {fields.map((field) => (
+          <Grid item xs={6} key={field.name}>
+            <DisplayTextField
+              name={field.name}
+              label={field.label}
+              lines={field.lines ?? 1}
+              value={row[field.name] as string}
+              copyable={field.copyable ?? false}
+            />
+          </Grid>
+        ))}
+      </Grid>
+    </InternalDetail>
+  );
+};