49 lines
886 B
Vue
49 lines
886 B
Vue
<template>
|
|
<component
|
|
:is="tag"
|
|
class="font-semibold"
|
|
:class="[
|
|
{
|
|
'text-3xl md:text-4xl lg:text-5xl 2xl:text-6xl': size === '600',
|
|
}, // H1
|
|
{
|
|
'text-3xl md:text-4xl 2xl:text-5xl': size === '500',
|
|
}, // H2
|
|
{
|
|
'text-2xl md:text-3xl 2xl:text-4xl': size === '400',
|
|
}, // H3
|
|
{
|
|
'text-xl lg:text-2xl 2xl:text-3xl': size === '300',
|
|
}, // H4
|
|
{
|
|
'text-lg md:text-xl': size === '200',
|
|
}, // H5
|
|
]"
|
|
>
|
|
<slot />
|
|
</component>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { toRefs } from 'vue'
|
|
|
|
const props = defineProps({
|
|
/**
|
|
* Tag name: h1 to h6
|
|
*/
|
|
tag: {
|
|
type: String,
|
|
default: 'h2',
|
|
},
|
|
/**
|
|
* Heading size: '600' (largest) to '200' (smallest)
|
|
*/
|
|
size: {
|
|
type: String,
|
|
default: '500',
|
|
},
|
|
})
|
|
|
|
const { size, tag } = toRefs(props)
|
|
</script>
|