Refactor metadata inspector with shared tab list and output panel.

Reuse InlineTabList for original/stripped tabs and a single pre block component to match patterns used elsewhere on the upload page.
2026-10-25 22:00:15 +01:00
parent 4e9a3368a6
commit f305ce7a39
4 changed files with 58 additions and 47 deletions
@@ -0,0 +1,36 @@
+<template>
+    <div class="inline-flex w-fit rounded-md border border-border p-0.5">
+        <button
+            v-for="option in options"
+            :key="option.value"
+            type="button"
+            class="rounded px-3 py-1.5 text-xs font-medium transition-colors"
+            :class="
+                modelValue === option.value
+                    ? 'bg-muted text-foreground'
+                    : 'text-muted-foreground hover:text-foreground'
+            "
+            @click="select(option.value)"
+        >
+            {{ option.label }}
+        </button>
+    </div>
+</template>
+
+<script setup lang="ts" generic="T extends string">
+import { type PropType } from 'vue';
+import type { InlineTabOption } from '@/types/ui/InlineTabOption';
+
+const modelValue = defineModel<T>({ required: true });
+
+defineProps({
+    options: {
+        type: Array as PropType<InlineTabOption<T>[]>,
+        required: true
+    }
+});
+
+const select = (value: T): void => {
+    modelValue.value = value;
+};
+</script>