88 lines
1.9 KiB
Vue
88 lines
1.9 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
emojiEnabled: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
emoji: {
|
|
type: String,
|
|
default: '💡'
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
background: {
|
|
type: String,
|
|
default: 'blue'
|
|
}
|
|
})
|
|
|
|
const backgroundClass = computed(() => {
|
|
if (props.background === 'gray') {
|
|
return 'prose-callout--gray'
|
|
}
|
|
|
|
if (props.background === 'green') {
|
|
return 'prose-callout--green'
|
|
}
|
|
|
|
if (props.background === 'yellow') {
|
|
return 'prose-callout--yellow'
|
|
}
|
|
|
|
if (props.background === 'blue') {
|
|
return 'prose-callout--blue'
|
|
}
|
|
|
|
if (props.background === 'purple') {
|
|
return 'prose-callout--purple'
|
|
}
|
|
|
|
return 'prose-callout--red'
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<aside
|
|
class="prose-callout prose-callout-card mb-2.5 rounded-[10px] p-5 text-[15px] leading-8 text-[var(--site-text)]"
|
|
:class="backgroundClass"
|
|
>
|
|
<div v-if="emojiEnabled || title" class="prose-callout-card__header mb-2.5 flex items-start gap-2">
|
|
<span v-if="emojiEnabled" class="prose-callout-card__emoji inline-flex shrink-0 pt-0.5 text-[20px] leading-none">{{ emoji || '💡' }}</span>
|
|
<strong v-if="title" class="prose-callout-card__title min-w-0 text-[18px] leading-[1.35] font-bold text-[#050505]">
|
|
{{ title }}
|
|
</strong>
|
|
</div>
|
|
<div class="prose-callout-card__body min-w-0 whitespace-pre-line">
|
|
<slot />
|
|
</div>
|
|
</aside>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.prose-callout--gray {
|
|
background: color-mix(in srgb, #050505 10%, #ffffff);
|
|
}
|
|
|
|
.prose-callout--blue {
|
|
background: color-mix(in srgb, #0055ff 10%, #ffffff);
|
|
}
|
|
|
|
.prose-callout--green {
|
|
background: color-mix(in srgb, #16ae68 10%, #ffffff);
|
|
}
|
|
|
|
.prose-callout--yellow {
|
|
background: color-mix(in srgb, #ffff00 10%, #ffffff);
|
|
}
|
|
|
|
.prose-callout--red {
|
|
background: color-mix(in srgb, #ff0000 10%, #ffffff);
|
|
}
|
|
|
|
.prose-callout--purple {
|
|
background: color-mix(in srgb, #8800ff 10%, #ffffff);
|
|
}
|
|
</style>
|