migrate on nuxt3
This commit is contained in:
48
components/Typography/UiParagraph.vue
Normal file
48
components/Typography/UiParagraph.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<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>
|
Reference in New Issue
Block a user