feat: schema builder's create flow

web/src/components/ApiPreviewSheet.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+import { useJsonCopy } from '@/composables/useJsonCopy'
+import { previewRoutes } from '@/lib/schemaBuilderSample'
+import { BOTTOM_SHEET_UI } from '@/lib/sheetUi'
+
+const props = defineProps<{ keyValue: string; json: string }>()
+
+const open = defineModel<boolean>('open', { default: false })
+
+const { copy, label: copyLabel, icon: copyIcon } = useJsonCopy()
+
+const first = computed(() => previewRoutes(props.keyValue)[0]!)
+</script>
+
+<template>
+	<USlideover
+		v-model:open="open"
+		side="bottom"
+		:title="t('API preview')"
+		:description="t('Where entries of this type live')"
+		:ui="BOTTOM_SHEET_UI"
+	>
+		<template #body>
+			<span class="text-xs text-muted" data-testid="api-sheet-route">{{
+				`${first.method} ${first.path}`
+			}}</span>
+			<pre
+				tabindex="0"
+				data-testid="api-sheet-json"
+				class="m-0 min-h-0 flex-1 overflow-auto border border-default bg-elevated px-3 py-2.5 font-mono text-xs/5 whitespace-pre text-highlighted"
+				>{{ json }}</pre
+			>
+		</template>
+		<template #footer>
+			<UButton
+				:icon="copyIcon"
+				data-testid="api-sheet-copy"
+				class="h-11 flex-1 justify-center"
+				@click="copy(json)"
+			>
+				<span aria-live="polite">{{ copyLabel }}</span>
+			</UButton>
+		</template>
+	</USlideover>
+</template>