86 lines
1.8 KiB
Vue
86 lines
1.8 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
variant: {
|
|
type: String,
|
|
default: 'default'
|
|
},
|
|
background: {
|
|
type: String,
|
|
default: 'gray'
|
|
}
|
|
})
|
|
|
|
const backgroundClass = computed(() => {
|
|
if (props.background === 'gray') {
|
|
return 'prose-blockquote--gray'
|
|
}
|
|
|
|
if (props.background === 'blue') {
|
|
return 'prose-blockquote--blue'
|
|
}
|
|
|
|
if (props.background === 'green') {
|
|
return 'prose-blockquote--green'
|
|
}
|
|
|
|
if (props.background === 'yellow') {
|
|
return 'prose-blockquote--yellow'
|
|
}
|
|
|
|
if (props.background === 'red') {
|
|
return 'prose-blockquote--red'
|
|
}
|
|
|
|
if (props.background === 'purple') {
|
|
return 'prose-blockquote--purple'
|
|
}
|
|
|
|
return 'prose-blockquote--gray'
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<blockquote
|
|
class="prose-blockquote mb-2.5 text-[15px] leading-8"
|
|
:class="variant === 'alt'
|
|
? 'rounded-[14px] border border-[var(--site-line)] bg-[var(--site-panel)] px-6 py-5 italic text-[var(--site-text)]'
|
|
: ['rounded-[10px] border-l-2 px-5 py-4 font-medium text-[#15171a]', backgroundClass]"
|
|
>
|
|
<span class="whitespace-pre-line">
|
|
<slot />
|
|
</span>
|
|
</blockquote>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.prose-blockquote--gray {
|
|
border-color: #050505;
|
|
background: color-mix(in srgb, #050505 10%, #ffffff);
|
|
}
|
|
|
|
.prose-blockquote--blue {
|
|
border-color: #0055ff;
|
|
background: color-mix(in srgb, #0055ff 10%, #ffffff);
|
|
}
|
|
|
|
.prose-blockquote--green {
|
|
border-color: #16ae68;
|
|
background: color-mix(in srgb, #16ae68 10%, #ffffff);
|
|
}
|
|
|
|
.prose-blockquote--yellow {
|
|
border-color: #ffff00;
|
|
background: color-mix(in srgb, #ffff00 10%, #ffffff);
|
|
}
|
|
|
|
.prose-blockquote--red {
|
|
border-color: #ff0000;
|
|
background: color-mix(in srgb, #ff0000 10%, #ffffff);
|
|
}
|
|
|
|
.prose-blockquote--purple {
|
|
border-color: #8800ff;
|
|
background: color-mix(in srgb, #8800ff 10%, #ffffff);
|
|
}
|
|
</style>
|