chore(Container): add component

This commit is contained in:
Benjamin Canac
2024-03-06 16:03:45 +01:00
parent d95556ebda
commit 5449d2aa5f
4 changed files with 63 additions and 0 deletions

View File

@@ -0,0 +1,36 @@
<script lang="ts">
import { tv } from 'tailwind-variants'
// import appConfig from '#build/app.config'
import theme from '#ui/theme/container'
const appContainer = tv(theme)
// const appContainer = tv({ extend: container, ...(appConfig.ui?.container || {}) })
export interface ContainerProps {
as?: string
class?: any
ui?: Partial<typeof appContainer>
}
</script>
<script setup lang="ts">
import { computed } from 'vue'
defineOptions({ inheritAttrs: false })
const props = withDefaults(defineProps<ContainerProps>(), {
as: 'div',
class: undefined,
ui: undefined
})
// Computed
const ui = computed(() => tv({ extend: appContainer, ...props.ui })({ class: props.class }))
</script>
<template>
<component :is="as" :class="ui" v-bind="$attrs">
<slot />
</component>
</template>

View File

@@ -0,0 +1,3 @@
export default {
base: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'
}