30 lines
635 B
Vue
30 lines
635 B
Vue
<template>
|
|
<div :class="containerClass">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
size: {
|
|
type: String,
|
|
default: 'content', // content (1400px) | narrow (800px)
|
|
},
|
|
padding: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
})
|
|
|
|
const sizeMap: Record<string, string> = {
|
|
content: 'max-w-7xl',
|
|
narrow: 'max-w-3xl',
|
|
}
|
|
|
|
const containerClass = computed(() => {
|
|
const sizeClass = sizeMap[props.size] || sizeMap.content
|
|
const paddingClass = props.padding ? 'px-4 sm:px-6 lg:px-8' : ''
|
|
return ['mx-auto w-full', sizeClass, paddingClass].filter(Boolean).join(' ')
|
|
})
|
|
</script>
|