sfp_front_vue_diarista_cliente/src/components/dashboard/DashboardProvidersClose.vue

<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
<template>
  <div class="q-mx-md q-mb-lg">
    <div class="row items-center justify-between no-wrap q-mb-sm">
      <div class="dashboard-section-title gradient-diarista">Perto de você</div>
        <div>
          <q-icon name="mdi-chevron-left" />
          <span>Até 8h</span>
          <q-icon name="mdi-chevron-right" />
        </div>
    </div>

    <div class="column ">
      <q-card
        v-for="p in providers"
        :key="p.id"
        class="shadow-card card-border bg-page text-text"
      >
        <q-card-section class="row no-wrap q-pa-sm">
          <div class="row no-wrap full-width">
            <div class="col-2">
              <q-avatar :style="p.avatarStyle" class="text-weight-bold col-2">
                {{ p.initials }}
              </q-avatar>
            </div>

            <div class="col-10 row">
              <div class="column col-9 justify-between">
                <span class="text-provider-close-name">{{ p.name }}</span>
                <span class="text-provider-close-region">{{ p.region }}</span>
                <div class="row items-center justify-between q-pr-lg">
                  <div class="row items-center">
                    <q-icon name="mdi-star" color="warning" size="10px" />
                    <span class="text-provider-close-rating">{{ p.rating }}</span>
                  </div>
                  <div class="row items-center">
                    <q-icon name="mdi-broom" color="secondary" />
                    <span class="text-provider-close-jobs">{{ p.jobs }}</span>
                  </div>
                  <div class="row items-center">
                    <q-icon name="mdi-map-marker-outline" size="10px" color="grey-6" />
                    <span class="text-provider-close-distance">{{ p.distance }}</span>
                  </div>
                </div>
              </div>

              <div class="column col-3 justify-between text-center items-center">
                <span class="text-provider-close-price">{{ p.price }}</span>
                <div class="full-width">
                  <q-btn
                    unelevated rounded no-caps
                    color="primary"
                    size="sm"
                    padding="3px 12px"
                    label="agendar"
                  />
                </div>
              </div>
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>

<script setup>

const providers = [
  {
    id: 1,
    initials: 'S',
    name: 'Silvia',
    region: 'Largo 13',
    rating: '4.9 (99+)',
    jobs: 312,
    distance: '0,8 km',
    price: 'R$165,00',
    avatarStyle: { background: '#ffe0f0', color: '#932e57' },
  },
  {
    id: 2,
    initials: 'M',
    name: 'Marina',
    region: 'Santo Amaro',
    rating: '4.8 (99+)',
    jobs: 128,
    distance: '1,2 km',
    price: 'R$145,00',
    avatarStyle: { background: '#fdd', color: '#7b2640' },
  },
  {
    id: 3,
    initials: 'E',
    name: 'Elton',
    region: 'Santo Amaro',
    rating: '4.7 (99+)',
    jobs: 74,
    distance: '1,5 km',
    price: 'R$130,00',
    avatarStyle: { background: '#d7e8ff', color: '#2158a8' },
  },
];
</script>

<style scoped lang="scss">

</style>