move components folder and fix build errors (#18)

* move components folder and fix build errors

Fixes https://github.com/owncast/owncast/issues/689

* Prettified Code!

Co-authored-by: nebunez <nebunez@users.noreply.github.com>

web/pages/hardware-info.tsx

@@ -1,13 +1,13 @@
-import { BulbOutlined, LaptopOutlined, SaveOutlined } from "@ant-design/icons";
-import { Row } from "antd";
+import { BulbOutlined, LaptopOutlined, SaveOutlined } from '@ant-design/icons';
+import { Row } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { fetchData, FETCH_INTERVAL, HARDWARE_STATS } from '../utils/apis';
-import Chart from './components/chart';
-import StatisticItem from "./components/statistic";
+import Chart from '../components/chart';
+import StatisticItem from '../components/statistic';
 
 interface TimedValue {
-  time: Date,
-  value: Number
+  time: Date;
+  value: Number;
 }
 
 export default function HardwareInfo() {
@@ -15,92 +15,88 @@ export default function HardwareInfo() {
     cpu: Array<TimedValue>(),
     memory: Array<TimedValue>(),
     disk: Array<TimedValue>(),
-    message: "",
+    message: '',
   });
 
   const getHardwareStatus = async () => {
     try {
       const result = await fetchData(HARDWARE_STATS);
       setHardwareStatus({ ...result });
-
     } catch (error) {
       setHardwareStatus({ ...hardwareStatus, message: error.message });
     }
   };
-  
+
   useEffect(() => {
     let getStatusIntervalId = null;
 
     getHardwareStatus();
     getStatusIntervalId = setInterval(getHardwareStatus, FETCH_INTERVAL); // runs every 1 min.
-  
-    // returned function will be called on component unmount 
+
+    // returned function will be called on component unmount
     return () => {
       clearInterval(getStatusIntervalId);
-    }
+    };
   }, []);
 
- 
   if (!hardwareStatus.cpu) {
     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;
-  
-const series = [
-  {
-    name: "CPU",
-    color: "#B63FFF",
-    data: hardwareStatus.cpu,
-  },
-  {
-    name: "Memory",
-    color: "#2087E2",
-    data: hardwareStatus.memory,
-  },
-  {
-    name: "Disk",
-    color: "#FF7700",
-    data: hardwareStatus.disk,
-  },
-];
-  
-    return (
-      <div>
-        <div>
-          <Row gutter={[16, 16]} justify="space-around">
-            <StatisticItem
-              title={series[0].name}
-              value={`${currentCPUUsage}`}
-              prefix={<LaptopOutlined style={{color: series[0].color }}/>}
-              color={series[0].color}
-              progress
-              centered
-            />
-            <StatisticItem
-              title={series[1].name}
-              value={`${currentRamUsage}`}
-              prefix={<BulbOutlined style={{color: series[1].color }} />}
-              color={series[1].color}
-              progress
-              centered
-            />
-            <StatisticItem
-              title={series[2].name}
-              value={`${currentDiskUsage}`}
-              prefix={<SaveOutlined  style={{color: series[2].color }} />}
-              color={series[2].color}
-              progress
-              centered
-            />
-          </Row>
+  const currentRamUsage = hardwareStatus.memory[hardwareStatus.memory.length - 1]?.value;
+  const currentDiskUsage = hardwareStatus.disk[hardwareStatus.disk.length - 1]?.value;
 
-          <Chart title="% used" dataCollections={series} color="#FF7700" unit="%" />
-        </div>
+  const series = [
+    {
+      name: 'CPU',
+      color: '#B63FFF',
+      data: hardwareStatus.cpu,
+    },
+    {
+      name: 'Memory',
+      color: '#2087E2',
+      data: hardwareStatus.memory,
+    },
+    {
+      name: 'Disk',
+      color: '#FF7700',
+      data: hardwareStatus.disk,
+    },
+  ];
+
+  return (
+    <div>
+      <div>
+        <Row gutter={[16, 16]} justify="space-around">
+          <StatisticItem
+            title={series[0].name}
+            value={`${currentCPUUsage}`}
+            prefix={<LaptopOutlined style={{ color: series[0].color }} />}
+            color={series[0].color}
+            progress
+            centered
+          />
+          <StatisticItem
+            title={series[1].name}
+            value={`${currentRamUsage}`}
+            prefix={<BulbOutlined style={{ color: series[1].color }} />}
+            color={series[1].color}
+            progress
+            centered
+          />
+          <StatisticItem
+            title={series[2].name}
+            value={`${currentDiskUsage}`}
+            prefix={<SaveOutlined style={{ color: series[2].color }} />}
+            color={series[2].color}
+            progress
+            centered
+          />
+        </Row>
+
+        <Chart title="% used" dataCollections={series} color="#FF7700" unit="%" />
       </div>
-    );
-}
+    </div>
+  );
+}