added streak container

src/lib/components/StreakCounter.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	let {
+		streak,
+		streakPercentile = null,
+	}: {
+		streak: number;
+		streakPercentile?: number | null;
+	} = $props();
+</script>
+
+<div
+	class="flex flex-col items-center justify-center bg-white/50 backdrop-blur-sm px-4 py-4 rounded-2xl border border-white/50 shadow-sm flex-1 text-center"
+>
+	<p
+		class="text-4xl font-triodion font-black text-orange-500 leading-none tabular-nums"
+	>
+		{streak}
+	</p>
+	<p
+		class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold mt-1 leading-tight"
+	>
+		day{streak === 1 ? "" : "s"}<br />in a row
+	</p>
+	{#if streakPercentile !== null && streakPercentile <= 50}
+		<p class="text-xs text-gray-700 font-semibold mt-2">
+			Top {streakPercentile}%
+		</p>
+	{/if}
+</div>