49 lines
872 B
Vue
49 lines
872 B
Vue
<template>
|
|
<component
|
|
:is="as"
|
|
class="text-primary"
|
|
:class="[
|
|
{
|
|
'text-2xl lg:text-3xl 2xl:text-4xl': size === '600',
|
|
}, // 24px
|
|
{
|
|
'text-xl lg:text-2xl 2xl:text-3xl': size === '500',
|
|
}, // 20px
|
|
{
|
|
'text-lg lg:text-xl 2xl:text-2xl': size === '400',
|
|
}, // 18px
|
|
{
|
|
'text-lg lg:text-[20px]': size === '300',
|
|
}, // 16px
|
|
{
|
|
'text-[15px]': size === '250',
|
|
}, // 15px
|
|
{
|
|
'text-[13px]': size === '200',
|
|
}, // 14px
|
|
]"
|
|
>
|
|
<slot />
|
|
</component>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { toRefs } from 'vue'
|
|
|
|
const props = defineProps({
|
|
as: {
|
|
type: String,
|
|
default: 'p',
|
|
},
|
|
/**
|
|
* Tailwind text size from 600 to 200
|
|
*/
|
|
size: {
|
|
type: String,
|
|
default: '300',
|
|
},
|
|
})
|
|
|
|
const { size, as } = toRefs(props)
|
|
</script>
|