zenno/race: common component for calculator outputs

zenno/src/routes/race/gate/+page.svelte

@@ -3,6 +3,7 @@
 	import * as race from '$lib/race';
 	import * as accel from '$lib/racelib/accel';
 	import type { Attachment } from 'svelte/attachments';
+	import CalcInfo from '../CalcInfo.svelte';
 
 	let rawPower = $state(1200);
 	let rawGuts = $state(1200);
@@ -284,14 +285,13 @@
 </form>
 
 {#snippet info(name: string, unit: string, val: number, val2?: number)}
-	<div class="m-2 max-w-72 flex-1 flex-col rounded-md border p-2 text-center shadow-sm transition-shadow hover:shadow-md">
-		<span class="block">{name}</span>
+	<CalcInfo title={name} class="max-w-72 flex-1">
 		{#if val2 == null}
 			<span class="block text-xl">{val.toFixed(3)} {unit}</span>
 		{:else}
 			<span class="block text-xl">{val.toFixed(3)} &ndash; {val2.toFixed(3)} {unit}</span>
 		{/if}
-	</div>
+	</CalcInfo>
 {/snippet}
 
 <div class="mx-auto flex w-full flex-col place-items-center md:flex-row md:justify-center">