Componentize a bit and consolidate some data

web/pages/hardware-info.tsx

@@ -1,6 +1,9 @@
 import React, { useState, useEffect } from 'react';
+import { Row, Skeleton, Empty, Typography } from "antd";
+import {LaptopOutlined, BulbOutlined, SaveOutlined} from "@ant-design/icons"
 import { HARDWARE_STATS, fetchData, FETCH_INTERVAL } from './utils/apis';
 import Chart from './components/chart';
+import StatisticItem from "./components/statistic";
 
 export default function HardwareInfo() {
   const [hardwareStatus, setHardwareStatus] = useState({
@@ -37,10 +40,33 @@ export default function HardwareInfo() {
     return null;
   }
 
+  const currentCPUUsage = hardwareStatus.cpu[hardwareStatus.cpu.length - 1]?.value;
+  const currentRamUsage =
+    hardwareStatus.memory[hardwareStatus.memory.length - 1]?.value;
+  const currentDiskUsage =
+    hardwareStatus.disk[hardwareStatus.disk.length - 1]?.value;
     return (
       <div>
         <div>
           <h2>Hardware Info</h2>
+          <Row gutter={[16, 16]}>
+            <StatisticItem
+              title="CPU used"
+              value={`${currentCPUUsage} %`}
+              prefix={<LaptopOutlined />}
+            />
+            <StatisticItem
+              title="Memory used"
+              value={`${currentRamUsage} %`}
+              prefix={<BulbOutlined />}
+            />
+            <StatisticItem
+              title="Disk used"
+              value={`${currentDiskUsage} %`}
+              prefix={<SaveOutlined />}
+            />
+          </Row>
+
           <div className="chart-container">
             <h3>CPU</h3>
             <Chart data={hardwareStatus.cpu} color="#FF7700" unit="%" />