lunasqu.ee-nuxt/components/featured-project.vue

42 lines
995 B
Vue

<template>
<div class="project">
<div class="project__image project__image--left" v-if="variant === 'left'">
<a :href="image" target="_blank"><img :src="thumb" :alt="title" /></a>
</div>
<div class="project__infobox">
<div class="project__info-title">
<h2>
<a :href="href" target="_blank">{{ title }}</a>
</h2>
</div>
<div class="project__info-body">
<slot></slot>
</div>
</div>
<div
class="project__image project__image--right"
v-if="variant === 'right'"
>
<a :href="image" target="_blank"><img :src="thumb" :alt="title" /></a>
</div>
</div>
</template>
<script setup lang="ts">
const props = defineProps<{
variant: 'left' | 'right';
title: string;
href: string;
image: string;
}>();
const thumb = computed(() => {
const split = props.image.split('/');
const last = split.length - 1;
split[last] = `thumb_${split[last]}`;
return split.join('/');
});
</script>