fnx_web/svelte/src/layout/TextBlock.svelte

<script lang="ts">
let {
	width = "750px",
	center = false,
	children
}: {
	width?: string;
	center?: boolean;
	children?: import('svelte').Snippet;
} = $props();
</script>

<div class="block" class:center style="width: {width};">
	{@render children?.()}
</div>

<style>
.block {
	display: block;
	text-align: initial;
	max-width: 100%;
	overflow-wrap: anywhere;
	margin: auto;

	background-color: var(--shaded_background);
	backdrop-filter: blur(4px);
	padding: 8px;
}
.center {
	text-align: center;
}
</style>