zenno/race: common component for calculator outputs

zenno/src/routes/race/mspeed/SpeedDur.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { HORSE_LENGTH, speedGain } from '$lib/race';
 	import type { Snippet } from 'svelte';
+	import CalcInfo from '../CalcInfo.svelte';
 
 	interface Props {
 		children: Snippet;
@@ -21,13 +22,12 @@
 	const text = $derived(gain.map(fmtp).join(' – '));
 </script>
 
-<div
-	class="m-2 flex h-full w-full max-w-80 flex-1 flex-col rounded-md border p-2 text-center shadow-sm transition-shadow hover:shadow-md"
->
-	<div class="block">{@render children()}</div>
-	<span class="block text-xl">{text} L</span>
-	<div class="flex flex-row">
-		<span class="flex-1 text-xs">{fmtp(speed)} m/s</span>
-		<span class="flex-1 text-xs">{dur.toFixed(3)} s</span>
-	</div>
-</div>
+<CalcInfo title={children} class="max-w-80 flex-1">
+	{text} L
+	{#snippet additional()}
+		<div class="flex flex-row">
+			<span class="flex-1 text-xs">{fmtp(speed)} m/s</span>
+			<span class="flex-1 text-xs">{dur.toFixed(3)} s</span>
+		</div>
+	{/snippet}
+</CalcInfo>