site_logiciels/components/Common/Carousel/Fonctionnalite.client.vue

<template>
  <LayoutContainer>
    <v-row class="center-90">
      <v-col cols="12" md="12">
        <LayoutUISubTitle>
          Découvrez toutes les fonctionnalités de notre solution
        </LayoutUISubTitle>

        <LayoutUITitle>
          Des fonctionnalités adaptées à vos besoins
        </LayoutUITitle>
      </v-col>

      <v-col cols="12" md="12" class="arrows">
        <v-btn icon="fas fa-chevron-left" aria-label="Précédent" @click="previousAction" />
        <v-btn icon="fas fa-chevron-right" aria-label="Suivant" @click="nextAction" />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12">
        <Carousel
          ref="carousel"
          :items-to-show="itemsToShow"
          :items-to-scroll="1"
          :wrap-around="true"
        >
          <Slide v-for="(card, index) in cards" :key="index">
            <div class="card-container">
              <v-card class="inv-theme">
                <v-img :src="card.logo" :alt="card.title" class="mx-auto" />

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

                <v-card-item>
                  <v-card-text>
                    <ul>
                      <li v-for="item in card.list" :key="item">
                        <p>{{ item }}</p>
                      </li>
                    </ul>
                  </v-card-text>
                </v-card-item>

                <div class="footer">
                  <p v-for="option in card.options" :key="option">
                    {{ option }}
                  </p>
                </div>
              </v-card>
            </div>
          </Slide>
        </Carousel>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup lang="ts">
import { useDisplay } from 'vuetify'
import { Carousel, Slide } from 'vue3-carousel'
import 'vue3-carousel/dist/carousel.css'
import type { PropType, Ref } from 'vue'
import type { Functionality } from '~/types/interface'

const { lgAndUp, mdAndUp, smAndUp } = useDisplay()

defineProps({
  cards: {
    type: Array as PropType<Array<Functionality>>,
    required: true,
  },
})

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

const itemsToShow = computed(() =>
  lgAndUp.value ? 5 : mdAndUp.value ? 3 : smAndUp.value ? 2 : 1
)

const nextAction = () => {
  carousel.value!.next()
}

const previousAction = () => {
  carousel.value!.prev()
}
</script>

<style scoped lang="scss">
h5 {
  text-align: center;
}

.v-row {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

.v-btn {
  width: 60px;
  height: 60px;
  background-color: transparent;
  color: var(--on-primary-color);
  border: 2px solid;
  border-color: var(--on-primary-color);
  cursor: pointer;
  border-radius: 0;
  margin: 6px;
}

.carousel {
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 2rem;
}

.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 2rem;
  width: 100%;
  height: 100%;
}

.v-card {
  border-radius: 1rem;
  transition: transform 0.3s;
  font-weight: 300;
  width: 100%;
  height: 100%;
  padding: 0 10% 14px 10%;

  .v-img {
    width: 5rem;
    height: 3rem;
    margin-top: 1rem;
    margin-bottom: 12px;
    fill: #fac20a !important;
  }

  .v-card-title {
    white-space: pre-wrap;
  }

  .v-card-item {
    text-align: left;
  }

  li {
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.2rem;
    margin-bottom: 1rem;
    color: var(--on-neutral-color);
  }

  .footer {
    position: absolute;
    left: 0;
    bottom: 1rem;
    margin-left: 1.3rem;
    font-size: 0.9rem;

    p {
      text-align: left;
    }
  }
}

.arrows {
  display: flex;
  align-content: center;
  justify-content: center;

  @media (max-width: 600px) {
    justify-content: center;
  }
}

</style>