feat(integration): add image variants section and standardize code snippets

web/src/components/EndpointCard.vue

@@ -3,13 +3,8 @@ import { t, translate } from '@/i18n'
 
 import { computed, ref } from 'vue'
 import ApiFieldTable from '@/components/ApiFieldTable.vue'
-import CodeBlock from '@/components/CodeBlock.vue'
-import {
-	RATE_LIMIT_SENTENCE,
-	NO_CONTENT_RESPONSE,
-	endpointExamples,
-	type ApiEndpoint,
-} from '@/data/apiCatalogue'
+import CodeSnippet from '@/components/CodeSnippet.vue'
+import { RATE_LIMIT_SENTENCE, endpointExamples, type ApiEndpoint } from '@/data/apiCatalogue'
 import { CHIP_CLASS, METHOD_CLASS, endpointAnchor } from '@/lib/apiReference'
 
 const props = defineProps<{
@@ -30,23 +25,12 @@ const bodyTitle = computed(() => {
 	}
 	return props.endpoint.bodyKind === 'json' ? t('Request body · JSON') : t('Request body')
 })
-const responseLabel = computed(() =>
-	props.endpoint.response === NO_CONTENT_RESPONSE ? 'HTTP' : 'JSON',
-)
-const responseLang = computed(() =>
-	props.endpoint.response === NO_CONTENT_RESPONSE ? 'text' : 'json',
-)
 
-const tabItems = [
-	{ label: 'fetch', value: 'fetch' },
-	{ label: 'curl', value: 'curl' },
-	{
-		get label() {
-			return t('Response')
-		},
-		value: 'response',
-	},
-]
+const snippetTabs = computed(() => [
+	{ k: 'fetch', label: 'fetch', code: examples.value.fetch },
+	{ k: 'curl', label: 'curl', code: examples.value.curl },
+	{ k: 'response', label: t('Response'), code: examples.value.response },
+])
 </script>
 
 <template>
@@ -119,40 +103,7 @@ const tabItems = [
 					<span v-else class="text-muted">{{ t('No request body.') }}</span>
 				</div>
 
-				<UTabs
-					v-model="activeTab"
-					:items="tabItems"
-					variant="link"
-					color="primary"
-					:ui="{
-						root: 'gap-0 border border-default',
-						list: 'gap-4 border-b border-default px-3 py-0 before:hidden',
-						trigger:
-							'h-9 grow-0 px-0 text-sm font-medium data-[state=inactive]:font-medium data-[state=inactive]:text-toned max-lg:h-11',
-						content: 'mt-0',
-					}"
-				>
-					<template #content="{ item }">
-						<CodeBlock
-							v-if="item.value === 'fetch'"
-							label="JavaScript"
-							lang="javascript"
-							:code="examples.fetch"
-						/>
-						<CodeBlock
-							v-else-if="item.value === 'curl'"
-							label="Shell"
-							lang="shell"
-							:code="examples.curl"
-						/>
-						<CodeBlock
-							v-else
-							:label="responseLabel"
-							:lang="responseLang"
-							:code="examples.response"
-						/>
-					</template>
-				</UTabs>
+				<CodeSnippet v-model:active="activeTab" :tabs="snippetTabs" />
 
 				<div v-if="endpoint.rateLimited" class="flex gap-2.5 text-toned">
 					<UIcon name="i-lucide-info" class="mt-0.5 size-4 shrink-0 text-info" />