floranet/src/pages/CategoryPage.vue

<template>
  <q-page class="category-container">
    <section class="products-section">
      <header class="products-section-header">
        <container>
          <div class="product-header-content">
            <h3 class="product-header-title subtitle">Ramos para obsequiar</h3>
            <p class="product-header-paragraph">
              Descripción SEO: Lorem ipsum dolor sit amet, consectetur
              adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua.
            </p>
          </div>

          <div class="product-header-filters">
            <div class="product-left-filters">
              <div class="filter-item availability-filter">
                <p class="filter-paragraph availability">
                  Disponibilidad para:
                  <span class="green-text">25 Julio en 08005</span>
                </p>

                <button
                  class="btn filter-btn availability"
                  type="button"
                  @click="modalStore.openModal({ modal: 'availability' })"
                >
                  <IconPencil />
                </button>
              </div>
            </div>

            <div class="product-right-filters">
              <button
                class="btn filter-item filters filter-btn"
                type="button"
                @click="modalStore.openModal({ modal: 'filters' })"
              >
                <p class="filter-paragraph remove-mob">Filtros</p>
                <IconFilter />
              </button>

              <div class="filter-item order-filter">
                <p class="filter-paragraph">
                  Ordenar por:
                  <span class="green-text">precio</span>
                </p>

                <button type="button" class="btn filter-btn price-order">
                  <IconArrowDownWhite />
                </button>
              </div>
            </div>
          </div>
        </container>
      </header>

      <div class="products-section-body">
        <container cardContainer>
          <card
            v-for="(
              { imgSrc, discount, isNew, title, value, id }, i
            ) in cardMock"
            :productValue="value"
            :productName="title"
            :discount="discount"
            :imgSrc="imgSrc"
            :isNew="isNew"
            :key="i"
            :id="id"
          />
        </container>
      </div>

      <footer class="products-section-footer">
        <RouterLink class="btn rounded outlined" to="/">
          Ver todos los diseños <IconArrowCircleFilledRight />
        </RouterLink>
      </footer>
    </section>

    <dudas-section />
    <modal modalItem="isOpenAvailability" />
    <modal modalItem="isOpenFilters" />
  </q-page>
</template>

<script lang="ts">
import IconArrowCircleFilledRight from 'src/components/icons/IconArrowCircleFilledRight.vue';
import IconArrowDownWhite from 'src/components/icons/IconArrowDownWhite.vue';
import IconFilter from 'src/components/icons/IconFilter.vue';
import IconPencil from 'src/components/icons/IconPencil.vue';
import DudasSection from 'src/components/sections/DudasSection.vue';
import Card from 'src/components/ui/Card.vue';
import Container from 'src/components/ui/Container.vue';
import Modal from 'src/components/ui/Modal.vue';
import { cardMock } from 'src/mock/cards';
import { useModalStore } from 'src/stores/modalStore';

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'CategoryPage',
  components: {
    IconArrowCircleFilledRight,
    IconArrowDownWhite,
    IconPencil,
    IconFilter,
    Container,
    Modal,
    Card,
    DudasSection,
  },
  setup() {
    const modalStore = useModalStore();

    return { cardMock, modalStore };
  },
});
</script>

<style lang="scss" scoped>
.products-section {
  display: flex;
  flex-direction: column;

  margin-bottom: 82px;

  & .products-section-header {
    & .product-header-content {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
      gap: 25px;
      margin-bottom: 93px;
    }

    & .product-header-filters {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 41px;
      margin-bottom: 78px;
      & .filter-paragraph {
        font-size: $font-14;
        color: $text-gray;
        white-space: nowrap;
      }

      & .filter-item {
        padding: 4px 0 4px 14px;
        background-color: $secondary-10;
        border-radius: 30px 0 0 30px;
        display: flex;
        align-items: center;
        position: relative;
        user-select: none;
        &.availability-filter {
          padding: 4px 30px 4px 14px;
        }
        &.order-filter {
          padding: 4px 30px 4px 14px;
        }

        &.filters {
          padding: 4px 15px 4px 10px;
          border-radius: 30px;
        }
        &.filter-price-order {
        }
      }

      & .filter-btn {
        padding: 8px;
        border-radius: 0 30px 30px 0;
        &.availability,
        &.price-order {
          position: absolute;
        }

        &.availability {
          right: -27px;
          padding: 6.5px;
        }

        &.price-order {
          right: -33px;
          padding: 9.5px;
        }
      }

      & .product-right-filters {
        display: flex;
        gap: 40px;
        margin-right: 33px;
      }

      @media only screen and (max-width: $med-md) {
        justify-content: center;
        align-items: center;

        & .filter-paragraph.remove-mob {
          display: none;
        }

        & .filter-item.filters {
          padding: 4px 8px;
        }

        & .product-left-filters {
          flex: 1;
          margin-right: 28px;
        }

        & .product-right-filters {
          flex: 1;
          justify-content: space-between;
        }
      }
    }
  }
  & .products-section-body {
    margin-bottom: 95px;
  }
  & .products-section-footer {
    align-self: center;
  }
}
</style>