refactor: move MonitorStatusPageEditForm into components

src/client/components/monitor/StatusPage/EditForm.tsx

@@ -0,0 +1,74 @@
+import { Button, Form, Input, Typography } from 'antd';
+import React from 'react';
+import { slugRegex } from '../../../../shared';
+import { z } from 'zod';
+
+const { Text } = Typography;
+
+interface Values {
+  title: string;
+  slug: string;
+}
+
+interface MonitorStatusPageEditFormProps {
+  isLoading?: boolean;
+  onFinish: (values: Values) => void;
+}
+
+export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps> =
+  React.memo((props) => {
+    return (
+      <div>
+        <Form<Values> layout="vertical" onFinish={props.onFinish}>
+          <Form.Item
+            label="Title"
+            name="title"
+            rules={[
+              {
+                required: true,
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label="Slug"
+            name="slug"
+            extra={
+              <div className="pt-2">
+                <div>
+                  Accept characters: <Text code>a-z</Text> <Text code>0-9</Text>{' '}
+                  <Text code>-</Text>
+                </div>
+                <div>
+                  No consecutive dashes <Text code>--</Text>
+                </div>
+              </div>
+            }
+            rules={[
+              {
+                required: true,
+              },
+              {
+                validator(rule, value, callback) {
+                  try {
+                    z.string().regex(slugRegex).parse(value);
+                    callback();
+                  } catch (err) {
+                    callback('Not valid slug');
+                  }
+                },
+              },
+            ]}
+          >
+            <Input addonBefore={`${window.origin}/status/`} />
+          </Form.Item>
+          <Button type="primary" htmlType="submit" loading={props.isLoading}>
+            Next
+          </Button>
+        </Form>
+      </div>
+    );
+  });
+MonitorStatusPageEditForm.displayName = 'MonitorStatusPageEditForm';

src/client/pages/Monitor/PageAdd.tsx

@@ -2,12 +2,8 @@ import React from 'react';
 import { useNavigate } from 'react-router';
 import { useCurrentWorkspaceId } from '../../store/user';
 import { trpc } from '../../api/trpc';
-import { Button, Form, Input, Typography } from 'antd';
 import { useEvent } from '../../hooks/useEvent';
-import { z } from 'zod';
+import { MonitorStatusPageEditForm } from '../../components/monitor/StatusPage/EditForm';
-import { slugRegex } from '../../../shared';
-
-const { Text, Paragraph } = Typography;
 
 interface Values {
   title: string;
@@ -35,59 +31,10 @@ export const MonitorPageAdd: React.FC = React.memo(() => {
 
   return (
     <div className="px-8 py-4">
-      <Form<Values> layout="vertical" onFinish={handleFinish}>
+      <MonitorStatusPageEditForm
-        <Form.Item
+        isLoading={createPageMutation.isLoading}
-          label="Title"
+        onFinish={handleFinish}
-          name="title"
+      />
-          rules={[
-            {
-              required: true,
-            },
-          ]}
-        >
-          <Input />
-        </Form.Item>
-
-        <Form.Item
-          label="Slug"
-          name="slug"
-          extra={
-            <div className="pt-2">
-              <div>
-                Accept characters: <Text code>a-z</Text> <Text code>0-9</Text>{' '}
-                <Text code>-</Text>
-              </div>
-              <div>
-                No consecutive dashes <Text code>--</Text>
-              </div>
-            </div>
-          }
-          rules={[
-            {
-              required: true,
-            },
-            {
-              validator(rule, value, callback) {
-                try {
-                  z.string().regex(slugRegex).parse(value);
-                  callback();
-                } catch (err) {
-                  callback('Not valid slug');
-                }
-              },
-            },
-          ]}
-        >
-          <Input addonBefore={`${window.origin}/status/`} />
-        </Form.Item>
-        <Button
-          type="primary"
-          htmlType="submit"
-          loading={createPageMutation.isLoading}
-        >
-          Next
-        </Button>
-      </Form>
     </div>
   );
 });