feat: schema builder's create flow

web/src/components/BuilderBadge.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+
+const props = defineProps<{ kind: 'new' | 'required' | 'unique'; onSand?: boolean }>()
+
+const badges = {
+	new: {
+		get label() {
+			return t('New')
+		},
+		class: 'border border-(--rc-sand) bg-(--rc-sand) text-(--rc-on-sand)',
+	},
+	required: {
+		get label() {
+			return t('Required')
+		},
+		class: 'border border-accented bg-transparent text-toned',
+	},
+	unique: {
+		get label() {
+			return t('Unique')
+		},
+		class: 'border border-accented bg-transparent text-toned',
+	},
+} as const
+
+const OUTLINE_ON_SAND = 'border border-(--rc-on-sand) bg-transparent text-(--rc-on-sand)'
+
+const badge = computed(() => badges[props.kind])
+const badgeClass = computed(() =>
+	props.onSand && props.kind !== 'new' ? OUTLINE_ON_SAND : badge.value.class,
+)
+</script>
+
+<template>
+	<UBadge
+		color="neutral"
+		variant="soft"
+		:class="badgeClass"
+		:ui="{ base: 'h-5 shrink-0 px-1.5 py-0 text-xs font-medium whitespace-nowrap' }"
+	>
+		{{ badge.label }}
+	</UBadge>
+</template>