cineclub-site/front/components/movieCard/listPerMonth.vue

<template>
  <div v-if="filmsByMonth" class="film-list block">
    <section
      v-for="({ projectionMonth, films }, index) in filmsByMonth"
      :key="index"
      class="columns"
    >
      <div class="column is-one-fifth">
        <h2 class="title is-5 month-label">{{ projectionMonth }}</h2>
      </div>
      <div class="column">
        <MovieCardFull
          v-for="film of films"
          :key="film.id"
          :film="film"
          class="block"
        />
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { FilmsByMonth } from "~/composables/types"
import { PropType } from "@vue/runtime-core"

defineProps({
  filmsByMonth: { type: Array as PropType<FilmsByMonth[]>, default: () => [] },
})
</script>

<style scoped lang="sass">
.film-list
  position: relative
  .month-label
    background-color: $white-bis
    width: 100%
    position: sticky
    top: 2rem
</style>