34 lines
732 B
Svelte
34 lines
732 B
Svelte
<script lang="ts">
|
|
import type { UiStatusItem } from "../types";
|
|
import FooterCell from "./FooterCell.svelte";
|
|
|
|
let {
|
|
id,
|
|
items,
|
|
compact = false,
|
|
}: {
|
|
id?: string;
|
|
items: UiStatusItem[];
|
|
compact?: boolean;
|
|
} = $props();
|
|
</script>
|
|
|
|
<section class="status-strip" data-compact={compact} data-model-id={id}>
|
|
{#each items as item (item.id)}
|
|
<FooterCell {item} />
|
|
{/each}
|
|
</section>
|
|
|
|
<style>
|
|
.status-strip {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
|
|
gap: 1px;
|
|
border: var(--ui-border);
|
|
background: var(--ui-color-line);
|
|
}
|
|
|
|
.status-strip[data-compact="true"] {
|
|
grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
|
|
}
|
|
</style>
|