42 lines
865 B
Svelte
42 lines
865 B
Svelte
<script lang="ts">
|
|
export let tops: { name: string; value: string }[];
|
|
export let rank: { rank: number; name: string; value: string } | null = null;
|
|
$: tops = [...tops, ...new Array(3).fill(null)].slice(0, 3);
|
|
</script>
|
|
|
|
<div class="classement">
|
|
{#each tops as t, i}
|
|
{#if t != null}
|
|
<p class={`top-${i+1}`}><strong>#{i + 1} - {t.name}</strong> - <span>{t.value}</span></p>
|
|
{:else}
|
|
<p class={`top-${i+1}`}><strong >#{i + 1}{" - "}</strong></p>
|
|
{/if}
|
|
|
|
{/each}
|
|
|
|
{#if rank != null && rank.rank > 3}
|
|
<p class="top-x"><span>#{rank.rank} - {rank.name}</span> - <span>{rank.value}</span></p>
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.classement {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.top-1 {
|
|
color: gold;
|
|
}
|
|
.top-2 {
|
|
color: silver;
|
|
}
|
|
.top-3 {
|
|
color: brown;
|
|
}
|
|
.top-x{
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|