Readying for design

app/components/SectionHeader.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="section-header" :class="[spacing]">
+    <p v-if="overline" class="text-ui-label text-candlelight-500 mb-2">
+      {{ overline }}
+    </p>
+    <component :is="tag" :class="[sizeClass, 'text-guild-100']">
+      <slot>{{ title }}</slot>
+    </component>
+    <p v-if="subtitle" class="mt-3 text-guild-400 text-lg leading-relaxed">
+      {{ subtitle }}
+    </p>
+    <GuildDivider v-if="divider" :variant="divider" compact class="mt-4" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+  overline: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (v) => ['xl', 'lg', 'md', 'sm'].includes(v),
+  },
+  tag: {
+    type: String,
+    default: 'h2',
+  },
+  divider: {
+    type: String,
+    default: '',
+    validator: (v) => ['', 'simple', 'woodcut', 'dither', 'dots'].includes(v),
+  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const sizeClass = computed(() => {
+  const sizes = {
+    xl: 'text-display-xl',
+    lg: 'text-display-lg',
+    md: 'text-display',
+    sm: 'text-display-sm',
+  }
+  return sizes[props.size]
+})
+
+const spacing = computed(() => props.compact ? 'mb-4' : 'mb-8')
+</script>