mirror of
https://github.com/pupperpowell/bibdle.git
synced 2026-04-05 17:33:31 -04:00
32 lines
815 B
Svelte
32 lines
815 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-5xl font-triodion font-black text-orange-500 leading-none tabular-nums"
|
|
>
|
|
{streak}
|
|
</p>
|
|
<p
|
|
class="text-xs uppercase justify-center tracking-widest text-gray-500 font-triodion font-bold py-2 leading-tight"
|
|
>
|
|
day{streak === 1 ? "" : "s"} in a row
|
|
</p>
|
|
{#if streakPercentile !== null && streakPercentile <= 50}
|
|
<p
|
|
class="text-xs text-black w-full tracking-widest uppercase font-semibold border-t border-t-stone-400 pt-2"
|
|
>
|
|
Top {streakPercentile}%
|
|
</p>
|
|
{/if}
|
|
</div>
|