sfp_front_vue_diarista_cliente/src/components/dashboard/DashboardScrollAreaSchedules.vue

<template>
  <section class="promo-scroll-wrapper q-ma-md">
    <div class="promo-scroll">
      <div
        v-for="card in cards"
        :key="card.id"
        class="promo-card"
        :class="{ 'cursor-pointer': card.route }"
        @click="card.route && router.push({ name: card.route })"
      >
        <img :src="card.image" :alt="card.alt" class="promo-card__img" />
      </div>
    </div>
  </section>
</template>

<script setup>
import { useRouter } from 'vue-router';
import Banner1 from 'src/assets/banner_1.svg';
import Banner2 from 'src/assets/banner_2.svg';

const router = useRouter();

const cards = [
  { id: 1, image: Banner1, alt: 'Diária sob medida', route: null },
  { id: 2, image: Banner2, alt: 'Escolha profissionais', route: 'SearchPage' },
];
</script>

<style scoped lang="scss">
.promo-scroll-wrapper {
  width: 100%;
  overflow: hidden;
}

.promo-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0 0 4px 16px;
  scroll-snap-type: x mandatory;

  &::-webkit-scrollbar {
    display: none;
  }

  &::after {
    content: '';
    flex: 0 0 16px;
  }
}

.promo-card {
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
  scroll-snap-align: start;
  background: #e8e4f5;
  flex-shrink: 0;
}

.promo-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}
</style>