32 lines
612 B
Svelte
32 lines
612 B
Svelte
<script lang="ts">
|
|
let { label, value, detail = '' }: { label: string; value: string; detail?: string } = $props();
|
|
</script>
|
|
|
|
<div class="tile card">
|
|
<div class="label">{label}</div>
|
|
<div class="value">{value}</div>
|
|
{#if detail}<div class="detail">{detail}</div>{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.tile {
|
|
padding: 1rem 1.15rem;
|
|
}
|
|
.label {
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
}
|
|
.value {
|
|
font-size: 1.55rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
margin-top: 0.15rem;
|
|
}
|
|
.detail {
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
margin-top: 0.15rem;
|
|
}
|
|
</style>
|