site_logiciels/components/Common/Agenda.vue

<!--
Section "Agenda des évènements"
-->
<template>
  <AnchoredSection id="agenda">
    <LayoutContainer class="mb-12">
      <v-row class="center-90 align-center my-6">
        <v-col cols="4" class="align-center">
          <LayoutUITitle> L'agenda Opentalent </LayoutUITitle>
        </v-col>

        <v-col cols="4">
          <!-- Factoriser les contrôles du carousel dans un component -->
          <div class="carousel-controls">
            <v-btn icon="fas fa-chevron-left" @click="goPrevious" />
            <v-btn icon="fas fa-chevron-right" @click="goNext" />
          </div>
        </v-col>

        <v-col cols="4" class="d-flex flex-row flex-1 justify-end align-center">
          <v-btn class="btn-news" text> Voir tous les évènements </v-btn>
        </v-col>
      </v-row>

      <v-row class="center-90">
        <p class="agenda-details">
          Retrouvez tous les évènements culturels autour de chez vous.
        </p>
      </v-row>

      <v-row class="center-90">
        <v-col cols="12">
          <Carousel ref="carousel" :items-to-show="3" :items-to-scroll="2">
            <Slide
              v-for="(event, eventIndex) in events"
              :key="eventIndex"
              class="card"
            >
              <v-card>
                <v-img :src="event.img" cover />

                <v-card-title>
                  {{ event.title }}
                </v-card-title>

                <v-card-text>
                  {{ event.localisation }}
                </v-card-text>

                <footer>
                  <v-chip-group column>
                    <v-chip
                      v-for="(tag, tagIndex) in event.tags"
                      :key="tagIndex"
                      :color="tagColor(tag)"
                      label
                    >
                      <span :class="tagTextColor(tag)">
                        {{ tag }}
                      </span>
                    </v-chip>
                  </v-chip-group>
                </footer>
              </v-card>
            </Slide>
          </Carousel>
        </v-col>
      </v-row>
    </LayoutContainer>
  </AnchoredSection>
</template>

<script setup lang="ts">
import { Carousel, Slide } from 'vue3-carousel'
import 'vue3-carousel/dist/carousel.css'
import type { Ref } from 'vue'
import AnchoredSection from '~/components/Layout/AnchoredSection.vue'
import type { Event } from '~/types/interface'

const tagColor = (tag: string) => {
  switch (tag) {
    case 'Payant':
      return 'red'
    case 'Gratuit':
      return 'green'
    default:
      return 'primary'
  }
}

const tagTextColor = (tag: string) => {
  switch (tag) {
    case 'Payant':
      return 'red--text'
    case 'Gratuit':
      return 'green--text'
    default:
      return 'black--text'
  }
}

const events: Array<Event> = [
  {
    rdv: '20h00',
    title: 'LA NUIT DES RÊVES  ',
    localisation: 'FESTIVALDE musique - LONGCHAMP',
    date: '21/06/2023',
    img: '/images/agenda/agenda2.jpg',
    tags: ['Festival', 'Musique', 'Tout public', 'Payant'],
  },
  {
    rdv: '20h00',
    title: 'LE LAC DES CYGNES',
    localisation: 'SPECTACLE DE DANSE - PARIS 1',
    date: '22/06/2023',
    img: '/images/agenda/agenda3.jpg',
    tags: ['Festival', 'Musique', 'Tout public', 'Gratuit'],
  },
  {
    rdv: '20h00',
    title: 'SOLIDAYS 2023  : 23 > 25 juin',
    localisation: 'ORCHESTRE DE PARIS - PARIS 12',
    date: '23/06/2023',
    img: '/images/agenda/agenda4.jpg',
    tags: ['Festival', 'Musique', 'Tout public', 'Payant'],
  },
  {
    rdv: '20h00',
    title: 'LE LAC DES CYGNES',
    localisation: 'FESTIVALDE musique - LONGCHAMP',
    date: '24/06/2023',
    img: '/images/agenda/agenda5.jpg',
    tags: ['Festival', 'Musique', 'Tout public', 'Payant'],
  },
  {
    rdv: '20h00',
    title: 'SOLIDAYS 2023  : 23 > 25 juin ',
    localisation: 'SPECTACLE DE DANSE - PARIS 1',
    date: '20/06/2023',
    img: '/images/agenda/agenda1.jpg',
    tags: ['Festival', 'Musique', 'Tout public', 'Payant'],
  },
]

const carousel: Ref<typeof Carousel | null> = ref(null)

const goPrevious = () => carousel.value!.prev()
const goNext = () => carousel.value!.next()
</script>

<style scoped>
.v-container {
  padding: 0 !important;
}

.container {
  background: var(--neutral-color);
}

.carousel-controls {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  .v-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: transparent;
    border: 2px solid;
    cursor: pointer;
    margin-right: 1rem;
    margin-bottom: 2rem;
    border-radius: 0;
  }
}

.btn-news {
  color: var(--primary-color);
  background: transparent;
  border: 1px solid var(--primary-color);
  border-radius: 6px;
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 25px;
  font-size: 10px;
  line-height: 15px;
}

.card {
  .v-card {
    box-shadow: none !important;
    margin-right: 1rem;
    text-align: left;
  }

  .v-img {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    width: 100%;
    height: 300px;

    img {
      background-position: center;
    }
  }

  footer {
    display: flex;
    text-align: left !important;

    .v-chip {
      color: var(--neutral-color);
      border: 1px solid var(--primary-color);
      border-radius: 3rem;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      text-align: center;
    }
  }
}

.agenda-details {
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  margin-left: 2rem;
  color: var(--primary-color);
  margin-bottom: 3rem;
  width: 15rem;
}

/* -- Classes dynamiques pour les tags --*/
.black--text {
  color: black;
}

.green--text {
  color: green;
}

.red--text {
  color: red;
}
</style>