32 lines
898 B
Vue
32 lines
898 B
Vue
<template>
|
|
<article class="Person flex-col">
|
|
<img
|
|
loading="lazy"
|
|
width="150"
|
|
height="150"
|
|
:srcset="[getImage('1x', true), getImage('2x', true), getImage('3x', true)].join(', ')"
|
|
:src="getImage('1x', false)"
|
|
:alt="`Bild von ${name}`"
|
|
/>
|
|
<h3>{{name}}</h3>
|
|
<p>
|
|
<span v-for="tag in tags">{{tag}}</span>
|
|
</p>
|
|
<p class="flavour">{{flavour}}</p>
|
|
<Button :href="link" class="button" target="_blank" rel="noreferrer noopener" label="Zur Homepage" :aria-label="`Externer Link zur Homepage von ${name}`" />
|
|
</article>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
type Props = {
|
|
img: string
|
|
name: string
|
|
tags: string[]
|
|
flavour: string
|
|
link: string
|
|
}
|
|
|
|
const { img } = defineProps<Props>()
|
|
|
|
const getImage = (size : '1x' | '2x' | '3x', set : boolean) => `/img/network/${img}@${size}.webp${set ? ` ${size}` : ''}`
|
|
</script>
|