feat: integration screen

web/src/components/EndpointCard.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import CodeBlock from '@/components/CodeBlock.vue'
+
+defineProps<{
+	method: 'GET'
+	path: string
+	description: string
+	examples: { fetch: string; curl: string; response: string }
+}>()
+
+const activeTab = ref('fetch')
+
+const tabItems = [
+	{ label: 'fetch', value: 'fetch' },
+	{ label: 'curl', value: 'curl' },
+	{ label: 'Response', value: 'response' },
+]
+</script>
+
+<template>
+	<UCard
+		:ui="{
+			root: 'border border-default ring-0 divide-default',
+			header: 'p-4 sm:p-4',
+			body: 'p-0 sm:p-0',
+		}"
+	>
+		<template #header>
+			<div class="flex flex-col gap-2">
+				<div class="flex flex-wrap items-center gap-2.5">
+					<UBadge :label="method" color="neutral" variant="solid" class="font-mono" />
+					<span class="font-mono text-base font-medium text-highlighted">{{ path }}</span>
+				</div>
+				<span class="text-toned">{{ description }}</span>
+			</div>
+		</template>
+
+		<UTabs
+			v-model="activeTab"
+			:items="tabItems"
+			variant="link"
+			color="primary"
+			:ui="{
+				root: 'gap-0',
+				list: 'gap-5 border-b border-default px-4 py-0 before:hidden',
+				trigger: 'h-9 grow-0 px-0 text-sm font-normal data-[state=active]:font-medium',
+				content: 'mt-0',
+			}"
+		>
+			<template #content="{ item }">
+				<CodeBlock
+					v-if="item.value === 'fetch'"
+					label="JavaScript"
+					lang="javascript"
+					:code="examples.fetch"
+				/>
+				<pre
+					v-else-if="item.value === 'curl'"
+					tabindex="0"
+					class="overflow-x-auto bg-elevated px-4 py-3.5 font-mono text-code whitespace-pre text-default"
+					>{{ examples.curl }}</pre
+				>
+				<pre
+					v-else
+					tabindex="0"
+					class="overflow-x-auto bg-elevated px-4 py-3.5 font-mono text-code whitespace-pre text-default"
+					>{{ examples.response }}</pre
+				>
+			</template>
+		</UTabs>
+	</UCard>
+</template>