sfp_front_vue_diarista_prestador/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"
        @click="goToCard(card)"
      >
        <img :src="card.image" :alt="card.alt" class="promo-card__img" />
      </div>
    </div>
  </section>
</template>
<script setup>
import Banner1 from 'src/assets/banner_1.svg';
import Banner2 from 'src/assets/banner_2.svg';

import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
import ProfileHelpDialog from 'src/components/profile/ProfileHelpDialog.vue';

const router = useRouter();
const $q = useQuasar();

const cards = [
  { id: 1, image: Banner1, alt: 'Diária sob medida', routeName: 'OpportunitiesPage' },
  { id: 2, image: Banner2, alt: 'Como aceitar uma diária', action: 'help' },
];

const goToCard = (card) => {
  if (card.action === 'help') {
    $q.dialog({ component: ProfileHelpDialog })
    return
  }
  if (card.routeName) {
    router.push({ name: card.routeName })
  }
}

</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;
  cursor: pointer;
}

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