frontend/src/lib/components/LabelledBlock.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<script lang="ts">
	import { idFromLabel } from '$lib/Utils';
	import type { Snippet } from 'svelte';

	interface Props {
		label: string;
		side?: Snippet;
		children?: Snippet<[{ id: string }]>;
	}

	let { label, side, children }: Props = $props();

	const id = idFromLabel(label);
</script>

<div class="flex flex-col">
	<div class="flex">
		<label for={id}>{label}</label>
		{#if side}
			<div class="grow"></div>
			{@render side?.()}
		{/if}
	</div>
	{@render children?.({ id })}
</div>