HomeNextEvents.vue

<template>
  <aside>
    <h1 class="text-3xl uppercase text-gray-400 font-bold ml-2 mb-2 md:ml-1.5">
      Événements à venir...
    </h1>

    <template v-if="!loading">
      <a
        v-for="(event, index) in events"
        :key="index"
        :href="`https://forum.monnaie-libre.fr/t/${event.slug}/${event.id}`"
        targe="_blank"
        class="block dark-hover:bg-gray-700 hover:bg-gray-100 p-2 mt-1 rounded-lg transition-colors"
      >
        <div class="text-sm text-gray-500">
          {{ $d(Date.parse(event.event.start), 'long') }}
        </div>
        <div>{{ event.title }}</div>
      </a>
    </template>

    <div v-else class="h-80 flex items-center">
      <span class="loading-state h-12 w-12 scale-150 transform mx-auto" />
    </div>
  </aside>
</template>

<script>
import { fetchNextEvents } from '~/libs/api-forum'

export default {
  name: 'HomeNextEvents',
  data() {
    return {
      events: [],
      loading: false,
    }
  },
  async mounted() {
    this.loading = true
    this.events = await fetchNextEvents()
    this.loading = false
  },
}
</script>