fix(ui): refactor stat row

frontend/src/components/Plugins/Minecraft/Minecraft.tsx

@@ -1,4 +1,7 @@
 import { useEffect, useState } from 'preact/hooks'
+import { StatRow } from '../../Stats/StatRow'
+import { Stat } from '../../Stats/Stat'
+
 import './Minecraft.css'
 
 interface McData {
@@ -20,27 +23,26 @@ export function Minecraft() {
   }, [])
 
   return (
-    <div className="quick-stats-outer">
-      <div className="quick-stats-header">
-        <span className="quick-stats-title">Minecraft Server ({data.address})</span>
-      </div>
-
-      <div className="quick-stats">
-        <div className="stat">
-          <span className="stat-big">{data.players}</span>
-          <span className="stat-small">Players Online</span>
-        </div>
-
-        <div className="stat">
-          <span className="stat-big">{data.version}</span>
-          <span className="stat-small">Version</span>
-        </div>
-
-        <div className="stat">
-          <span className="stat-big">{data.latency}ms</span>
-          <span className="stat-small">Latency</span>
-        </div>
-      </div>
-    </div>
+    <StatRow header={`Minecraft Server (${data.address})`}>
+      <Stat
+        big={data.players.toString()}
+        small="Players Online"
+      />
+
+      <Stat
+        big={data.version}
+        small="Version"
+      />
+
+      <Stat
+        big={data.latency + 'ms'}
+        small="Latency"
+      />
+
+      <Stat
+        big={data.description}
+        small="Description"
+      />
+    </StatRow>
   )
 }

frontend/src/components/QuickStats.tsx

@@ -1,5 +1,7 @@
 import { bytesToReadable } from '../util/byte'
 import './QuickStats.css'
+import { Stat } from './Stats/Stat'
+import { StatRow } from './Stats/StatRow'
 import { ArrowDown } from './icons/ArrowDown'
 import { ArrowUp } from './icons/ArrowUp'
 
@@ -18,45 +20,44 @@ export function QuickStats(props: Props) {
   const swapUse = props.swapData[props.swapData.length - 1]?.used
   const diskUse = Object.keys(props.diskData).map(d => props.diskData[d][props.diskData[d].length - 1].used).reduce((a, b) => a + b)
   const diskTotal = Object.keys(props.diskData).map(d => props.diskData[d][props.diskData[d].length - 1].total).reduce((a, b) => a + b)
+  const diskDeviceCount = Object.keys(props.diskData).length
   const netRecieve = Object.keys(props.networkData).map(n => props.networkData[n][props.networkData[n].length - 1].recieve).reduce((a, b) => a + b)
   const netTransmit = Object.keys(props.networkData).map(n => props.networkData[n][props.networkData[n].length - 1].transmit).reduce((a, b) => a + b)
+  const netDeviceCount = Object.keys(props.networkData).length
   const cpuPct = props.cpuData[props.cpuData.length - 1]?.used
 
   return (
-    <div className="quick-stats-outer">
-      <div className="quick-stats-header">
-        <span className="quick-stats-title">Quick Stats</span>
-      </div>
+    <StatRow header={'Quick Stats'}>
+      <Stat
+        big={bytesToReadable(memoryUse)}
+        small={
+          ((memoryUse / props.sysinfo.mem_size * 100) || 0).toFixed(2) + '% of total memory (' + bytesToReadable(props.sysinfo.mem_size) + ')'
+        }
+      />
 
-      <div className="quick-stats">
-        <div className="stat">
-          <span className="stat-big">{bytesToReadable(memoryUse)}</span>
-          <span className="stat-small">{
-            ((memoryUse / props.sysinfo.mem_size * 100) || 0).toFixed(2)
-          }% of total memory ({bytesToReadable(props.sysinfo.mem_size)})</span>
-        </div>
+      <Stat
+        big={bytesToReadable(swapUse)}
+        small={
+          ((swapUse / props.sysinfo.swap_size * 100) || 0).toFixed(2) + '% of total swap (' + bytesToReadable(props.sysinfo.swap_size) + ')'
+        }
+      />
 
-        <div className="stat">
-          <span className="stat-big">{bytesToReadable(swapUse)}</span>
-          <span className="stat-small">{
-            ((swapUse / props.sysinfo.swap_size * 100) || 0).toFixed(2)
-          }% of total swap ({bytesToReadable(props.sysinfo.swap_size)})</span>
-        </div>
+      <Stat
+        big={cpuPct.toFixed(2) + '%'}
+        small={
+          props.sysinfo.cpu_brand
+        }
+        mini={true}
+      />
 
-        <div className="stat">
-          <span className="stat-big">{cpuPct.toFixed(2)}%</span>
-          <span className="stat-small">
-            <span className="stat-mini">({props.sysinfo.cpu_brand})</span>
-          </span>
-        </div>
-
-        <div className="stat">
-          <span className="stat-big">{props.processList.length}</span>
-          <span className="stat-small">Active Processes</span>
-        </div>
+      <Stat
+        big={props.processList.length.toString()}
+        small={'Active Processes'}
+      />
 
-        <div className="stat">
-          <span className="stat-big network-stat">
+      <Stat
+        big={(
+          <span className="network-stat">
             <span>
               {bytesToReadable(netRecieve)} <ArrowDown />  
             </span>
@@ -67,17 +68,16 @@ export function QuickStats(props: Props) {
               {bytesToReadable(netTransmit)} <ArrowUp />
             </span>
           </span>
-          <span className="stat-small">Network RX / TX ({props.networkData.length} devices)</span>
-        </div>
-
-        <div className="stat">
-          <span className="stat-big">{bytesToReadable(diskUse)}</span>
-          <span className="stat-small">{
-            (diskUse / diskTotal * 100).toFixed(2)
-          }% of {props.diskData.length} disks</span>
-        </div>
-      </div>
-    </div>
+        )}
+        small={'Network RX / TX (' + netDeviceCount + ' devices)'}
+      />
 
+      <Stat
+        big={bytesToReadable(diskUse)}
+        small={
+          (diskUse / diskTotal * 100).toFixed(2) + '% of ' + diskDeviceCount + ' disks'
+        }
+      />
+    </StatRow>
   )
 }

frontend/src/components/Stats/Stat.css

@@ -0,0 +1,41 @@
+
+.stat-mini {
+  font-size: 12px;
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+}
+
+.stat-big {
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.stat-small {
+  font-size: 14px;
+  font-weight: normal;
+}
+
+.network-stat {
+  display: flex;
+  flex-direction: row;
+
+  align-items: center;
+}
+
+.network-stat span {
+  display: flex;
+  flex-direction: row;
+
+  align-items: center;
+}
+
+.stat-seperator {
+ padding: 4px;
+}

frontend/src/components/Stats/Stat.tsx

@@ -0,0 +1,19 @@
+import { VNode } from 'preact'
+import './Stat.css'
+
+interface Props {
+  big: string | VNode
+  small?: string
+  mini?: boolean
+}
+
+export function Stat(props: Props) {
+  return (
+    <div className="stat">
+      <span className="stat-big">{props.big}</span>
+      <span className={'stat-' + (props.mini ? 'mini' : 'small')}>
+        {props.small}
+      </span>
+    </div>
+  )
+}

frontend/src/components/Stats/StatRow.css

@@ -0,0 +1,35 @@
+.stat-row-outer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+
+  width: 90%;
+  height: 120px;
+
+  padding-bottom: 32px;
+}
+
+.stat-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center; 
+
+  width: 100%;
+  height: 100%;
+
+  text-align: center;
+}
+
+.stat-row-header {
+  margin: 18px;
+}
+
+.stat-row-title {
+  width: 100%;
+  text-align: center;
+
+  font-size: 28px;
+  font-weight: bold;
+}

frontend/src/components/Stats/StatRow.tsx

@@ -0,0 +1,21 @@
+import { VNode } from 'preact'
+import './StatRow.css'
+
+interface Props {
+  children?: VNode | VNode[]
+  header?: string
+}
+
+export function StatRow(props: Props) {
+  return (
+    <div className="stat-row-outer">
+      <div className="stat-row-header">
+        <span className="stat-row-title">{props.header}</span>
+      </div>
+
+      <div className="stat-row">
+        {props.children}
+      </div>
+    </div>
+  )
+}