44 lines
858 B
Vue
44 lines
858 B
Vue
<script setup lang="ts">
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
subtitle: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
bubble: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative font-sans select-none flex justify-between items-center">
|
|
<div>
|
|
<h1
|
|
v-if="subtitle"
|
|
class="text-base text-neutral-300 italic tracking-wide font-black leading-none"
|
|
>{{ subtitle }}</h1>
|
|
|
|
<h1 class="text-xl font-bold text-neutral-700 leading-none relative z-[1]">
|
|
{{ title }}
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="flex gap-2">
|
|
<slot name="action"/>
|
|
</div>
|
|
|
|
<div
|
|
v-if="bubble"
|
|
class="absolute -left-1.5 -bottom-1.5 w-4 h-4 rounded-full bg-primary-500/50 z-[0]"
|
|
></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |