45 lines
1.2 KiB
Vue
45 lines
1.2 KiB
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>
|