Dominik Milacher
0dc24c4db7
Some checks failed
Build and deploy updated apps / Build & deploy (push) Failing after 50s
37 lines
964 B
Vue
37 lines
964 B
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
class?: string
|
|
ux?: any
|
|
tag: string
|
|
type: 'page' | 'section' | 'heading' | 'subheading' | 'paragraph' | 'label' | 'detail' | 'hint'
|
|
}>()
|
|
|
|
const classes = useStyling(
|
|
'textSpacing',
|
|
{
|
|
slots: {
|
|
base: '',
|
|
},
|
|
variants: {
|
|
type: {
|
|
page: { base: 'text-4xl font-bold tracking-tight leading-tight' },
|
|
section: { base: 'text-3xl font-semibold tracking-tight leading-snug' },
|
|
heading: { base: 'text-2xl font-semibold leading-snug' },
|
|
subheading: { base: 'text-xl font-medium leading-snug' },
|
|
paragraph: { base: 'text-lg leading-relaxed' },
|
|
label: { base: 'text-lg font-bold leading-none' },
|
|
detail: { base: 'text-base leading-snug' },
|
|
hint: { base: 'text-base leading-snug' },
|
|
},
|
|
},
|
|
},
|
|
props
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<component :is="props.tag" :class="classes.base">
|
|
<slot />
|
|
</component>
|
|
</template>
|