zenno/race: common component for calculator outputs

2026-07-18 16:38:07 -04:00
parent cb54bbe414
commit b22c8307fd
4 changed files with 49 additions and 30 deletions
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
+
+	interface Props {
+		title: Snippet | string;
+		children: Snippet;
+		additional?: Snippet;
+		class?: ClassValue | null;
+	}
+
+	let { title, children, additional, class: className }: Props = $props();
+
+	const cl = $derived([
+		'm-2 flex flex-col rounded-md border p-2 text-center shadow-sm transition-shadow hover:shadow-md',
+		className,
+	]);
+</script>
+
+<div class={cl}>
+	<span class="block">
+		{#if typeof title === 'string'}
+			{title}
+		{:else}
+			{@render title()}
+		{/if}
+	</span>
+	<span class="block text-xl">
+		{@render children()}
+	</span>
+	{@render additional?.()}
+</div>