Reorganize admin components to help bundling

web/components/admin/notification/federation.tsx

@@ -0,0 +1,52 @@
+import { Button, Typography } from 'antd';
+import React, { useState, useContext, useEffect } from 'react';
+import Link from 'next/link';
+import { ServerStatusContext } from '../../../utils/server-status-context';
+
+const { Title } = Typography;
+
+export const ConfigNotify = () => {
+  const serverStatusData = useContext(ServerStatusContext);
+  const { serverConfig } = serverStatusData || {};
+  const { federation } = serverConfig || {};
+
+  const { enabled } = federation || {};
+  const [formDataValues, setFormDataValues] = useState<any>({});
+
+  useEffect(() => {
+    setFormDataValues({
+      enabled,
+    });
+  }, [enabled]);
+
+  return (
+    <>
+      <Title>Fediverse Social</Title>
+      <p className="description">
+        Enabling the Fediverse social features will not just alert people to when you go live, but
+        also enable other functionality.
+      </p>
+      <p>
+        Fediverse social features:{' '}
+        <span style={{ color: federation.enabled ? 'green' : 'red' }}>
+          {formDataValues.enabled ? 'Enabled' : 'Disabled'}
+        </span>
+      </p>
+
+      <Link passHref href="/config-federation">
+        <Button
+          type="primary"
+          style={{
+            position: 'relative',
+            marginLeft: 'auto',
+            right: '0',
+            marginTop: '20px',
+          }}
+        >
+          Configure
+        </Button>
+      </Link>
+    </>
+  );
+};
+export default ConfigNotify;