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

web/src/components/ApiKeyReveal.vue

@@ -2,7 +2,7 @@
 import { t } from '@/i18n'
 
 import { computed, nextTick, ref, watch } from 'vue'
-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+import CodeSnippet from '@/components/CodeSnippet.vue'
 
 const props = defineProps<{
 	name: string
@@ -13,14 +13,12 @@ const open = defineModel<boolean>('open', { default: false })
 
 const emit = defineEmits<{ done: [] }>()
 
-const { copied, copy } = useCopyToClipboard()
-const copyButton = ref<{ $el: HTMLElement } | null>(null)
+const snippet = ref<{ focusCopy: () => void } | null>(null)
 
 const description = computed(() =>
 	t('"{0}" is ready. Copy the key and store it somewhere safe.', [props.name]),
 )
-const copyLabel = computed(() => (copied.value ? t('Copied') : t('Copy')))
-const copyIcon = computed(() => (copied.value ? 'i-lucide-check' : 'i-lucide-copy'))
+const keyTabs = computed(() => [{ k: 'key', label: t('API key'), code: props.apiKey }])
 
 watch(
 	open,
@@ -30,7 +28,7 @@ watch(
 		}
 		await nextTick()
 		await nextTick()
-		copyButton.value?.$el?.focus()
+		snippet.value?.focusCopy()
 	},
 	{ immediate: true },
 )
@@ -78,25 +76,7 @@ function keepOpenOnOutsideInteraction(event: Event) {
 					:title="t('You won\'t be able to see this key again.')"
 					:ui="{ root: 'gap-2.5 px-3 py-2.5', title: 'text-sm font-medium' }"
 				/>
-				<div class="flex flex-col border border-accented bg-elevated md:flex-row">
-					<span
-						class="min-w-0 flex-1 px-3 py-2.5 font-mono text-code/5 break-all text-highlighted"
-						>{{ apiKey }}</span
-					>
-					<UButton
-						ref="copyButton"
-						:icon="copyIcon"
-						color="neutral"
-						variant="ghost"
-						aria-live="polite"
-						class="h-11 justify-center gap-1.5 rounded-none border-t border-accented px-3.5 font-medium md:border-t-0 md:border-l"
-						:class="copied ? 'text-success' : 'text-highlighted'"
-						:ui="{ leadingIcon: 'size-3.5' }"
-						@click="copy(apiKey)"
-					>
-						{{ copyLabel }}
-					</UButton>
-				</div>
+				<CodeSnippet ref="snippet" :tabs="keyTabs" />
 				<span class="text-muted">{{
 					t('Closing this window discards the key from the screen. Copy it first.')
 				}}</span>