cineclub-site/front/pages/index.vue

<template>
  <main>
    <h1 hidden>Page d'accueil</h1>
    <section class="section">
      <h2 class="title">La semaine prochaine</h2>
      <template v-if="firstFilm">
        <MovieCardFull :film="firstFilm" />
      </template>
    </section>
    <section v-if="nextFilms.length" class="section is-relative">
      <h2 class="title">Et après</h2>
      <div class="is-flex next-films">
        <MovieCardShort v-for="film of nextFilms" :key="film.id" :film="film" />
      </div>
      <div class="is-flex mt-5">
        <nuxt-link class="ml-auto" to="/calendrier?view=future">
          Voir plus
        </nuxt-link>
      </div>
    </section>
  </main>
</template>

<script setup lang="ts">
import { Film } from "~/composables/types"

useHead({ title: "Accueil" })

const films = ref<Film[]>()
films.value = ((await apiGet<Film[]>(`films/home/`)).data.value || []) as Film[]
const firstFilm = computed(() => films.value?.[0])
const nextFilms = computed(() => films.value?.slice(1))
</script>

<style lang="sass">
.next-films
  flex-wrap: wrap
  justify-content: space-evenly
  margin-bottom: -3rem
  > *
    flex: 0 0 31rem
    margin-bottom: 3rem
    &:not(:last-child)
      margin-right: 3rem
</style>