61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
<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>
|