36 lines
754 B
Vue
36 lines
754 B
Vue
<template>
|
|
<section :class="sectionClass">
|
|
<slot />
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
variant: {
|
|
type: String,
|
|
default: 'default',
|
|
},
|
|
paddingY: {
|
|
type: String,
|
|
default: 'lg',
|
|
},
|
|
})
|
|
|
|
const variantMap: Record<string, string> = {
|
|
default: 'bg-base-200 text-base-content',
|
|
hero: 'bg-primary text-primary-content rounded-box overflow-hidden px-6',
|
|
plain: '',
|
|
}
|
|
|
|
const paddingMap: Record<string, string> = {
|
|
md: 'py-10',
|
|
lg: 'py-12 lg:py-16',
|
|
}
|
|
|
|
const sectionClass = computed(() => {
|
|
const variantClass = variantMap[props.variant] ?? variantMap.default
|
|
const pyClass = paddingMap[props.paddingY] ?? paddingMap.lg
|
|
return `${variantClass} ${pyClass}`.trim()
|
|
})
|
|
</script>
|