refactor: extract StatusPageServices

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

@@ -0,0 +1,34 @@
+import { Empty } from 'antd';
+import React from 'react';
+import { MonitorHealthBar } from '../MonitorHealthBar';
+
+interface StatusPageServicesProps {
+  workspaceId: string;
+  monitorList: PrismaJson.MonitorStatusPageList;
+}
+export const StatusPageServices: React.FC<StatusPageServicesProps> = React.memo(
+  (props) => {
+    const { workspaceId, monitorList } = props;
+
+    return (
+      <div className="shadow-2xl p-2.5 flex flex-col gap-4">
+        {monitorList.length > 0 ? (
+          monitorList.map((item) => (
+            <div key={item.id} className="hover:bg-black hover:bg-opacity-20">
+              <MonitorHealthBar
+                workspaceId={workspaceId}
+                monitorId={item.id}
+                count={40}
+                size="large"
+                showCurrentStatus={true}
+              />
+            </div>
+          ))
+        ) : (
+          <Empty description="No any monitor has been set" />
+        )}
+      </div>
+    );
+  }
+);
+StatusPageServices.displayName = 'StatusPageServices';

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

@@ -1,7 +1,6 @@
-import { Button, Empty } from 'antd';
+import { Button } from 'antd';
 import React, { useState } from 'react';
 import { trpc } from '../../../api/trpc';
-import { MonitorHealthBar } from '../MonitorHealthBar';
 import { useAllowEdit } from './useAllowEdit';
 import {
   MonitorStatusPageEditForm,
@@ -11,6 +10,7 @@ import clsx from 'clsx';
 import { useRequest } from '../../../hooks/useRequest';
 import { useNavigate } from 'react-router';
 import { ColorSchemeSwitcher } from '../../ColorSchemeSwitcher';
+import { StatusPageServices } from './Services';
 
 interface MonitorStatusPageProps {
   slug: string;
@@ -94,26 +94,10 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
           <div className="text-lg mb-2">Services</div>
 
           {info && (
-            <div className="shadow-2xl p-2.5 flex flex-col gap-4">
-              {monitorList.length > 0 ? (
-                monitorList.map((item) => (
-                  <div
-                    key={item.id}
-                    className="hover:bg-black hover:bg-opacity-20"
-                  >
-                    <MonitorHealthBar
+            <StatusPageServices
               workspaceId={info.workspaceId}
-                      monitorId={item.id}
-                      count={40}
-                      size="large"
-                      showCurrentStatus={true}
+              monitorList={monitorList}
             />
-                  </div>
-                ))
-              ) : (
-                <Empty description="No any monitor has been set" />
-              )}
-            </div>
           )}
         </div>
       </div>