frontend: Add basic statistics page

2 files changed, 39 insertions, 0 deletions

diff --git a/frontend/src/lib/statistics/Stat.svelte b/frontend/src/lib/statistics/Stat.svelte
new file mode 100644
index 0000000..c657526
--- /dev/null
+++ b/frontend/src/lib/statistics/Stat.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	export let title: string;
+	export let value: number;
+	export let precision = 0;
+	export let unit = '';
+
+	function format(value: number) {
+		if (Number.isNaN(value) || !Number.isFinite(value)) {
+			return 0;
+		}
+
+		if (Number.isInteger(value)) {
+			return value;
+		} else {
+			return value.toFixed(precision);
+		}
+	}
+</script>
+
+<div class="flex flex-col">
+	<h2 class="text-lg font-medium">
+		{title}
+	</h2>
+	<span class="text-base font-medium">
+		{format(value)}{unit}
+	</span>
+</div>
diff --git a/frontend/src/lib/statistics/StatGroup.svelte b/frontend/src/lib/statistics/StatGroup.svelte
new file mode 100644
index 0000000..e1b97da
--- /dev/null
+++ b/frontend/src/lib/statistics/StatGroup.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	export let title;
+</script>
+
+<section
+	class="flex flex-col gap-2 rounded bg-slate-900 p-2 font-medium shadow-md shadow-slate-950/30"
+>
+	<h2 class="text-2xl">{title}</h2>
+	<div class="flex flex-row flex-wrap gap-10">
+		<slot />
+	</div>
+</section>