app/components/Ui/EventList.vue

<template>
  <div>
    <v-list>

      <v-list-item
        class="event-item"
        v-for="event in events"
        :key="event.id"
        :subtitle="date.format(event.datetimeStart, 'fullDateWithWeekday')"
        :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>

          <UiButtonDelete :entity="event">
            <v-avatar color="error">
              <v-icon>fas fa-trash</v-icon>
            </v-avatar>
          </UiButtonDelete>
        </template>
      </v-list-item>

    </v-list>

    <div class="d-flex justify-space-between px-4 py-2">
      <v-btn variant="outlined" @click="$emit('load', pagination.first)" v-if="pagination.first && pagination.previous">Premier</v-btn>
      <v-btn variant="outlined" @click="$emit('load', pagination.previous)" v-if="pagination.previous">Précédents</v-btn>
      <v-btn variant="outlined" @click="$emit('load', pagination.next)" v-if="pagination.next">Suivants</v-btn>
      <v-btn variant="outlined" @click="$emit('load', pagination.last)" v-if="pagination.last != 1">Dernier</v-btn>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
import type {Collection} from "pinia-orm";
import Event from "~/models/Freemium/Event";
import type {Pagination} from "~/types/data";
import { useDate } from 'vuetify'

const props = defineProps<{
  events: Collection<Event>,
  pagination: Pagination
}>()

const emits = defineEmits(['edit', 'load'])
const date = useDate()
</script>

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