52 lines
979 B
Vue
52 lines
979 B
Vue
<template>
|
|
<div class="page-block">
|
|
<div class="page-block__header">
|
|
<div class="d-flex flex-column">
|
|
<div class="d-flex align-items-center" style="gap: 16px">
|
|
<h3 v-if="title">
|
|
{{ title }}
|
|
</h3>
|
|
|
|
<slot name="badge" />
|
|
</div>
|
|
<span v-if="subTitle" class="page-block__subtitle">{{ subTitle }}</span>
|
|
</div>
|
|
|
|
<slot name="actions" />
|
|
</div>
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
title: { type: String },
|
|
subTitle: { type: String },
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--page-block-gap, 8px);
|
|
|
|
border-radius: 12px;
|
|
padding: var(--page-block-padding, 16px);
|
|
background-color: $clr-white;
|
|
|
|
&__header{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&__subtitle{
|
|
@include txt-i-m;
|
|
margin-top: 4px;
|
|
color: $clr-grey-500;
|
|
|
|
}
|
|
}
|
|
</style>
|