67 lines
1.2 KiB
Svelte
67 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import type { UiSeverity } from "../types";
|
|
import IconGlyph from "./IconGlyph.svelte";
|
|
|
|
let {
|
|
title,
|
|
detail,
|
|
icon = "mdi:information-outline",
|
|
severity = "neutral",
|
|
}: {
|
|
title: string;
|
|
detail?: string;
|
|
icon?: string;
|
|
severity?: UiSeverity;
|
|
} = $props();
|
|
</script>
|
|
|
|
<section class="system-state" data-severity={severity}>
|
|
<IconGlyph name={icon} size="lg" />
|
|
<div>
|
|
<h2>{title}</h2>
|
|
{#if detail}
|
|
<p>{detail}</p>
|
|
{/if}
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.system-state {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
gap: var(--ui-space-3);
|
|
align-items: center;
|
|
border: var(--ui-border);
|
|
background: rgba(6, 8, 7, 0.82);
|
|
padding: var(--ui-space-4);
|
|
}
|
|
|
|
.system-state[data-severity="warning"] {
|
|
color: var(--ui-color-warning);
|
|
}
|
|
|
|
.system-state[data-severity="danger"],
|
|
.system-state[data-severity="unavailable"] {
|
|
color: var(--ui-color-danger);
|
|
}
|
|
|
|
.system-state[data-severity="loading"] {
|
|
color: var(--ui-color-accent);
|
|
}
|
|
|
|
h2,
|
|
p {
|
|
margin: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
p {
|
|
margin-top: var(--ui-space-1);
|
|
color: var(--ui-color-muted);
|
|
font-size: 0.72rem;
|
|
}
|
|
</style>
|