36 lines
816 B
Vue
36 lines
816 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: 'rounded-[28px] bg-white px-6 text-[#2f2418] shadow-none',
|
|
hero: 'overflow-hidden rounded-[34px] bg-[#10223b] px-6 text-white shadow-[0_22px_54px_rgba(16,34,59,0.24)]',
|
|
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>
|