mirror of
https://github.com/pupperpowell/bibdle.git
synced 2026-04-05 17:33:31 -04:00
30 lines
728 B
Svelte
30 lines
728 B
Svelte
<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>
|