46 lines
919 B
Vue
46 lines
919 B
Vue
<template>
|
|
<div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
|
|
<div
|
|
v-if="imageFilename"
|
|
class="mb-4 flex justify-center"
|
|
>
|
|
<img
|
|
:src="`/api/personen/${imageFilename}?width=200&height=200`"
|
|
:alt="`${title}: ${name}`"
|
|
class="w-32 h-32 object-cover rounded-full border-4 border-primary-100 shadow-md"
|
|
loading="lazy"
|
|
>
|
|
</div>
|
|
<h3
|
|
v-if="title"
|
|
class="text-xl font-display font-bold text-gray-900 mb-2"
|
|
>
|
|
{{ title }}
|
|
</h3>
|
|
<h4 class="text-lg font-semibold text-primary-600 mb-3">
|
|
{{ name }}
|
|
</h4>
|
|
<div class="space-y-1 text-gray-600">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
name: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
imageFilename: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
})
|
|
</script>
|
|
|