app/components/Ui/EventList.vue

<template>
  <div>
    <v-list height="380">
      <v-list-item
        v-for="event in events"
        :key="event.id"
        class="event-item"
        :subtitle="date.format(event.datetimeStart, 'fullDateWithWeekday')"
        :title="event.name"
      >
        <template #prepend>
          <v-avatar color="grey-lighten-1">
            <UiImage :image-id="event.image" :width="50" />
          </v-avatar>
        </template>

        <template #append>
          <v-avatar @click="$emit('edit', event.id)">
            <v-icon>fas fa-pencil</v-icon>
          </v-avatar>

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

    <div
      v-if="events.length > 0"
      class="d-flex justify-space-between px-4 py-2 pagination mb-5"
    >
      <v-btn
        variant="flat"
        class="pagination-btn"
        :disabled="!pagination.first || !pagination.previous"
        @click="$emit('load', pagination.first)"
      >
        <v-avatar>
          <v-icon>fas fa-angles-left</v-icon>
        </v-avatar>
      </v-btn>
      <v-btn
        variant="flat"
        class="pagination-btn"
        :disabled="!pagination.previous"
        @click="$emit('load', pagination.previous)"
      >
        <v-avatar>
          <v-icon>fas fa-angle-left</v-icon>
        </v-avatar>
      </v-btn>
      <v-btn
        variant="flat"
        class="pagination-btn"
        :disabled="!pagination.next"
        @click="$emit('load', pagination.next)"
      >
        <v-avatar>
          <v-icon>fas fa-angle-right</v-icon>
        </v-avatar>
      </v-btn>
      <v-btn
        variant="flat"
        class="pagination-btn"
        :disabled="pagination.last == 1"
        @click="$emit('load', pagination.last)"
      >
        <v-avatar>
          <v-icon>fas fa-angles-right</v-icon>
        </v-avatar>
      </v-btn>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
import type { Collection } from 'pinia-orm'
import type 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;
  color: rgb(var(--v-theme-on-primary-alt));
}

.pagination-btn[disabled] {
  opacity: 0.3;
}
</style>