38 lines
901 B
Vue
38 lines
901 B
Vue
<script lang="ts" setup>
|
|
defineProps({
|
|
title: String,
|
|
subtitle: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
contentClass: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col h-full">
|
|
<header
|
|
class="w-full h-11 px-4 flex justify-between items-center bg-gradient-to-r from-primary-50 to-primary-100 border-b">
|
|
<div class="flex flex-col gap-0.5">
|
|
<h1 class="font-semibold text-neutral-900" :class="{ 'text-xs': !!subtitle, 'text-base': !subtitle }">
|
|
{{ title }}
|
|
</h1>
|
|
<p v-if="subtitle" class="text-2xs text-neutral-500">
|
|
{{ subtitle }}
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<slot name="actions" />
|
|
</div>
|
|
</header>
|
|
<div :class="`flex-1 overflow-auto relative ${contentClass}`">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|