90 lines
1.9 KiB
Svelte
90 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import type { UiStatusItem } from "../types";
|
|
|
|
let { item }: { item: UiStatusItem } = $props();
|
|
|
|
let target = $derived(item.link?.external ? "_blank" : undefined);
|
|
let rel = $derived(item.link?.external ? "noreferrer" : undefined);
|
|
</script>
|
|
|
|
{#snippet cellContent()}
|
|
<span>{item.label}</span>
|
|
<strong>{item.value}</strong>
|
|
{/snippet}
|
|
|
|
{#if item.link}
|
|
<a
|
|
class="footer-cell"
|
|
data-severity={item.severity || "neutral"}
|
|
data-model-id={item.id}
|
|
href={item.link.href}
|
|
target={target}
|
|
rel={rel}
|
|
aria-label={item.link.label}
|
|
>
|
|
{@render cellContent()}
|
|
</a>
|
|
{:else}
|
|
<div class="footer-cell" data-severity={item.severity || "neutral"} data-model-id={item.id}>
|
|
{@render cellContent()}
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.footer-cell {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
min-height: 1.9rem;
|
|
align-items: center;
|
|
background: rgba(2, 3, 2, 0.92);
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
span,
|
|
strong {
|
|
min-width: 0;
|
|
padding: 0.34rem 0.52rem;
|
|
overflow-wrap: anywhere;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
span {
|
|
height: 100%;
|
|
border-right: var(--ui-border);
|
|
color: var(--ui-color-muted);
|
|
font-size: 0.52rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
strong {
|
|
color: var(--ui-color-text);
|
|
font-size: 0.58rem;
|
|
}
|
|
|
|
.footer-cell[data-severity="ok"] strong {
|
|
background: var(--ui-color-accent);
|
|
color: #060706;
|
|
}
|
|
|
|
.footer-cell[data-severity="warning"] strong {
|
|
color: var(--ui-color-warning);
|
|
}
|
|
|
|
.footer-cell[data-severity="danger"] strong {
|
|
color: var(--ui-color-danger);
|
|
}
|
|
|
|
.footer-cell[data-severity="stale"] strong,
|
|
.footer-cell[data-severity="unavailable"] strong {
|
|
color: var(--ui-color-stale);
|
|
}
|
|
|
|
.footer-cell[data-severity="loading"] strong {
|
|
color: var(--ui-color-accent);
|
|
}
|
|
|
|
.footer-cell:where(a):hover strong {
|
|
color: var(--ui-color-accent);
|
|
}
|
|
</style>
|