32 lines
639 B
Vue
32 lines
639 B
Vue
<script setup>
|
|
defineProps({
|
|
src: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
alt: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
variant: {
|
|
type: String,
|
|
default: 'regular'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<figure
|
|
class="prose-image my-8"
|
|
:class="{
|
|
'prose-image--wide lg:-mx-10': variant === 'wide',
|
|
'prose-image--full lg:-mx-20': variant === 'full'
|
|
}"
|
|
>
|
|
<img class="prose-image__media w-full bg-surface object-cover" :src="src" :alt="alt">
|
|
<figcaption v-if="$slots.default" class="prose-image__caption mt-3 text-center text-sm text-muted">
|
|
<slot />
|
|
</figcaption>
|
|
</figure>
|
|
</template>
|