site_logiciels/components/About/Agenda.vue

<template>
  <AnchoredSection id="agenda">
    <LayoutContainer class="mb-12" >
      <v-row class="custom-row align-center my-6">
        <v-col cols="4" class="align-center">
          <LayoutUITitle>
            L'agenda Opentalent
          </LayoutUITitle>
        </v-col>

        <v-col cols="4">
          <!-- Factoriser les controles 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="custom-row">
        <p class="agenda-details">
          Retrouvez tous les évènements culturels autour de chez vous.
        </p>
      </v-row>

      <v-row class="custom-row">
        <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 AnchoredSection from "~/components/Layout/AnchoredSection.vue";
import { 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: #F8F8F8
}

.custom-row {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.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);
  font-family: "Barlow", serif;
  background: transparent;
  border: 1px solid var(--primary-color);
  border-radius: 6px;
  font-style: normal;
  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: white;
      border: 1px solid #0e2d32;
      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: #091d20;
  margin-bottom: 3rem;
  width: 15rem;
}

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

.green--text {
  color: green;
}

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