1 files changed, 55 insertions, 0 deletions
diff --git a/ping/frontend/src/lib/components/NumberStatList.svelte b/ping/frontend/src/lib/components/NumberStatList.svelte
new file mode 100644
index 0000000..b6444e8
--- /dev/null
+++ b/ping/frontend/src/lib/components/NumberStatList.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	export interface INumberStatList {
+		name: string;
+		value: string;
+		icon: string;
+		color: string;
+	}
+
+	const { statsList = [] }: { statsList?: INumberStatList[] } = $props();
+</script>
+
+<section class="numberStatList">
+	{#each statsList as stat}
+		<div class="card">
+			<img src={stat.icon} alt="" class="stat-icon" />
+			<span class="stat-name">{stat.name}</span>
+			<span class="stat-value" style:color={stat.color}>{stat.value}</span>
+		</div>
+	{/each}
+</section>
+
+<style>
+	.numberStatList {
+		color: white;
+		display: flex;
+		width: 100%;
+		align-items: stretch;
+		justify-content: stretch;
+	}
+
+	.numberStatList :global(.card) {
+		flex: 1;
+		display: grid;
+		grid-template-areas: 'icon name' 'icon amount';
+		align-items: center;
+		justify-content: space-around;
+	}
+
+	.stat-icon {
+		width: 24px;
+		height: 24px;
+		grid-area: icon;
+	}
+
+	.stat-name {
+		grid-area: name;
+		font-weight: bold;
+	}
+
+	.stat-value {
+		grid-area: amount;
+		font-size: 1.2em;
+		font-weight: bold;
+	}
+</style>