app/components/Ui/EventList.vue

<template>
  <div>
    <v-list>

      <v-list-item
        class="event-item"
        v-for="event in events"
        :key="event.id"
        :subtitle="formatDate(event.date)"
        :title="event.name"
      >
        <template v-slot:prepend>
          <v-avatar color="grey-lighten-1">
            <v-img :src="event.image" alt="Image de l'événement" />
          </v-avatar>
        </template>

        <template v-slot:append>
          <v-avatar color="primary" @click="$emit('edit', event.id)">
            <v-icon>fas fa-pencil</v-icon>
          </v-avatar>
          <v-avatar color="error" @click="$emit('delete', event.id)">
            <v-icon>fas fa-trash</v-icon>
          </v-avatar>
        </template>
      </v-list-item>

    </v-list>

    <div class="d-flex justify-space-between px-4 py-2">
      <v-btn variant="outlined" @click="$emit('load-prev')">Précédents</v-btn>
      <v-btn variant="outlined" @click="$emit('load-next')">Suivants</v-btn>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'

interface Event {
  id: number
  name: string
  date: string
  location: string
  image: string
}

const props = defineProps<{ events: Event[] }>()
const emits = defineEmits(['edit', 'delete', 'load-next', 'load-prev'])

function formatDate(dateStr: string): string {
  const date = new Date(dateStr)
  return date.toLocaleDateString('fr-FR', {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })
}
</script>

<style scoped>
.event-item {
  margin-top: 20px;
}
</style>