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