phundrak.com/content/.vuepress/components/PreviewImage.vue
Lucien Cartier-Tilet 8413181750
refactor: move Vuepress files in dedicated directory
Signed-off-by: Lucien Cartier-Tilet <lucien@phundrak.com>
2023-02-09 12:13:47 +01:00

52 lines
946 B
Vue

<template>
<a class="no-decoration" :href="src">
<figure class="img-prev" :style="style">
<ResponsiveImage
:source="props.src"
:size="props.width"
:preview="props.preview"
:previewWidth="props.previewWidth"
:previewTheshold="props.maxwidth"
/>
<figcaption>
<slot />
</figcaption>
</figure>
</a>
</template>
<script setup lang="ts">
const props = defineProps<{
src: string;
width: number;
preview: string;
previewWidth: number;
maxwidth?: number;
}>();
const style = props.maxwidth ? `max-width: ${props.maxwidth}px` : '';
</script>
<style scoped lang="scss">
img {
height: auto;
width: 100%;
}
figure {
float: left;
margin: 0.5rem 1rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-width: 400px;
}
@media only screen and (max-width: 800px) {
figure {
float: none;
}
}
</style>