Enhance Vereinsmeisterschaften and Vorstand pages with image support for players and board members. Implement lightbox functionality for player images in Vereinsmeisterschaften. Update CSV handling to include image filenames for better data management. Refactor components to utilize PersonCard for board members, improving code readability and maintainability.
This commit is contained in:
35
components/PersonCard.vue
Normal file
35
components/PersonCard.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user