Files
chatwoot/app/javascript/dashboard/components/ModalHeader.vue
Sivin Varghese 3054a4cb59 feat: Add support for dark mode in dashboard (#7460)
- Add config for TailwindCSS
- Enable HMR
- Add a config in LocalStorage for Dark Mode

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
2023-07-05 12:13:32 -07:00

49 lines
953 B
Vue

<template>
<div class="column page-top-bar">
<img v-if="headerImage" :src="headerImage" alt="No image" />
<h2 class="text-slate-800 text-lg dark:text-slate-100">
{{ headerTitle }}
</h2>
<p v-if="headerContent" class="small-12 column wrap-content">
{{ headerContent }}
<span v-if="headerContentValue" class="content-value">
{{ headerContentValue }}
</span>
</p>
<slot />
</div>
</template>
<script>
export default {
props: {
headerTitle: {
type: String,
default: '',
},
headerContent: {
type: String,
default: '',
},
headerContentValue: {
type: String,
default: '',
},
headerImage: {
type: String,
default: '',
},
},
};
</script>
<style scoped lang="scss">
.wrap-content {
word-wrap: break-word;
margin-top: var(--space-small);
.content-value {
font-weight: var(--font-weight-bold);
}
}
</style>