Create/detail updates

apps/bridge-frontend/app/(main)/facebook/[[...segment]]/@create/_components/Create.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { FC, useEffect } from "react";
+import { useFormState } from "react-dom";
+import { useRouter } from "next/navigation";
+import { Grid } from "@mui/material";
+import { TextField } from "ui";
+import { Create as InternalCreate } from "@/app/_components/Create";
+import { addFacebookBotAction } from "../../_actions/facebook";
+
+export const Create: FC = () => {
+  const router = useRouter();
+  const initialState = {
+    message: null,
+    errors: {},
+    values: {
+      name: "",
+      description: "",
+      one: "",
+    },
+  };
+  const [formState, formAction] = useFormState(
+    addFacebookBotAction,
+    initialState,
+  );
+
+  useEffect(() => {
+    if (formState.success) {
+      router.back();
+    }
+  }, [formState.success, router]);
+
+  return (
+    <InternalCreate
+      title="Create Facebook Bot"
+      entity="facebook"
+      formAction={formAction}
+    >
+      <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
+        <Grid item xs={12}>
+          <TextField name="name" label="Name" required formState={formState} />
+        </Grid>
+        <Grid item xs={12}>
+          <TextField
+            name="description"
+            label="Description"
+            formState={formState}
+            lines={3}
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            name="appId"
+            label="App ID"
+            required
+            formState={formState}
+            helperText="Get it from Facebook Developer Console"
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            name="appSecret"
+            label="App Secret"
+            required
+            formState={formState}
+            helperText="Get it from Facebook Developer Console"
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            name="pageId"
+            label="Page ID"
+            required
+            formState={formState}
+            helperText="Get it from Facebook Developer Console"
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            name="pageAccessToken"
+            label="Page Access Token"
+            required
+            formState={formState}
+            helperText="Get it from Facebook Developer Console"
+          />
+        </Grid>
+      </Grid>
+    </InternalCreate>
+  );
+};