feat: register T0

web/src/components/ResultPanel.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref } from 'vue'
+
+interface ResultPanelAction {
+	label: string
+	color?: 'primary' | 'neutral'
+	variant?: 'solid' | 'soft' | 'outline' | 'ghost'
+	to?: string
+	onClick?: () => void
+}
+
+const props = defineProps<{
+	tone: 'success' | 'error' | 'info'
+	icon: string
+	title: string
+	description: string
+	actions: ResultPanelAction[]
+}>()
+
+const role = computed(() => (props.tone === 'error' ? 'alert' : 'status'))
+
+const toneTileClass: Record<'success' | 'error' | 'info', string> = {
+	success: 'bg-success/10 text-success',
+	error: 'bg-error/10 text-error',
+	info: 'bg-info/10 text-info',
+}
+
+const tileClass = computed(() => toneTileClass[props.tone])
+
+const titleEl = ref<HTMLHeadingElement | null>(null)
+
+onMounted(async () => {
+	await nextTick()
+	titleEl.value?.focus()
+})
+</script>
+
+<template>
+	<div :role="role" class="flex flex-col gap-4">
+		<div :class="['flex h-11 w-11 items-center justify-center', tileClass]">
+			<UIcon :name="icon" class="h-6 w-6" />
+		</div>
+		<div class="flex flex-col gap-1.5">
+			<h1 ref="titleEl" tabindex="-1" class="text-xl font-semibold leading-7 outline-none">
+				{{ title }}
+			</h1>
+			<p class="text-toned text-sm">{{ description }}</p>
+		</div>
+		<div class="flex w-full flex-col gap-2">
+			<UButton
+				v-for="action in actions"
+				:key="action.label"
+				block
+				size="lg"
+				:color="action.color ?? 'primary'"
+				:variant="action.variant ?? 'solid'"
+				:to="action.to"
+				@click="action.onClick"
+			>
+				{{ action.label }}
+			</UButton>
+		</div>
+		<slot />
+	</div>
+</template>