Merge pull request #86 from K97i/v2-cpu-util

Add CPU Utilization Modal

Author: zleyyij

new/apps/web/src/lib/components/Widgets.svelte

@@ -40,6 +40,7 @@
 </div>
 
 <div class="widgets">
+	<CpuUsage cpuLoad={report.Hardware.Cpu.LoadPercentage} />
 	<!-- <CpuUsage cpuloadData={rawJSON.Hardware.Cpu.LoadPercentage} />
 	<RamUsage runprocData={rawJSON.System.RunningProcesses} ramData={rawJSON.Hardware.Ram} />
 	<Temps /> -->

new/apps/web/src/lib/components/widgets/CpuUsage.svelte

@@ -2,19 +2,33 @@
 <script lang="ts">
 	import Widget from '../../common/ModalWidget.svelte';
 
-	export let cpuloadData;
+	interface Props {
+		cpuLoad: number;
+	}
+
+	let {
+		cpuLoad,
+	}: Props = $props();
 </script>
 
 <!-- CPU Usage -->
-<Widget title="CPU Usage" type="" modalId="cpu-usage-modal">
-	<div slot="values">
+<Widget title="CPU Usage">
+	{#snippet widgetContents()}
 		<div class="widget-value">
-			<div class="widget-value">
-				<span class="green">
-					{cpuloadData ?? '--'}%
-					<!-- <?= $json_data['Hardware']['Cpu']['LoadPercentage'] ?? '--' ?>% -->
-				</span>
-			</div>
+			<span class="green">
+				{cpuLoad ?? '--'}%
+			</span>
 		</div>
-	</div>
+	{/snippet}
 </Widget>
+
+<style>
+	span {
+		color: var(--color-secondary-50);
+	}
+
+	div {
+		color: var(--color-surface-300);
+		font-size: 13pt;
+	}
+</style>