86 lines
1.9 KiB
Svelte
86 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import type { UiModuleBlock } from "../types";
|
|
import IconGlyph from "./IconGlyph.svelte";
|
|
|
|
let { module }: { module: UiModuleBlock } = $props();
|
|
</script>
|
|
|
|
<aside class="module-card" data-severity={module.severity || "neutral"} data-model-id={module.id}>
|
|
<div>
|
|
{#if module.title}
|
|
<h2>{module.title}</h2>
|
|
{/if}
|
|
{#if module.value}
|
|
<strong>{module.value}</strong>
|
|
{/if}
|
|
{#if module.detail || module.label}
|
|
<p>{module.detail || module.label}</p>
|
|
{/if}
|
|
</div>
|
|
{#if module.icon}
|
|
<IconGlyph name={module.icon} size="lg" />
|
|
{/if}
|
|
</aside>
|
|
|
|
<style>
|
|
.module-card {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: var(--ui-space-4);
|
|
align-items: start;
|
|
min-width: min(100%, 18rem);
|
|
border: var(--ui-border);
|
|
background: rgba(6, 8, 7, 0.82);
|
|
padding: var(--ui-space-3);
|
|
}
|
|
|
|
h2,
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
h2 {
|
|
color: var(--ui-color-muted);
|
|
font-size: 0.82rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
strong {
|
|
display: block;
|
|
margin-top: var(--ui-space-1);
|
|
font-family: var(--ui-font-display);
|
|
font-size: 2.25rem;
|
|
line-height: 0.9;
|
|
}
|
|
|
|
p {
|
|
margin-top: var(--ui-space-1);
|
|
color: var(--ui-color-muted);
|
|
font-size: 0.72rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.module-card[data-severity="ok"] :global(.icon-glyph) {
|
|
background: var(--ui-color-accent);
|
|
color: #050605;
|
|
}
|
|
|
|
.module-card[data-severity="warning"] {
|
|
border-color: color-mix(in srgb, var(--ui-color-warning), transparent 42%);
|
|
color: var(--ui-color-warning);
|
|
}
|
|
|
|
.module-card[data-severity="danger"] {
|
|
border-color: color-mix(in srgb, var(--ui-color-danger), transparent 32%);
|
|
color: var(--ui-color-danger);
|
|
}
|
|
|
|
.module-card[data-severity="stale"],
|
|
.module-card[data-severity="unavailable"] {
|
|
color: var(--ui-color-stale);
|
|
}
|
|
|
|
.module-card[data-severity="loading"] {
|
|
color: var(--ui-color-accent);
|
|
}
|
|
</style>
|