gami-web/app/components/popup/FindPartner.vue

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { useFindPartnerPopup } from '~/composables/useFindPartnerPopup'

const { state, close, toggleTag, applyFilters } = useFindPartnerPopup()
const { t } = useI18n()

const handleUpdateShow = (value: boolean) => {
  if (!value) {
    close()
  }
}

const handleSubmit = () => {
  applyFilters()
  close()
}
</script>

<template>
  <van-popup
    :show="state.visible"
    round
    position="bottom"
    class="find-partner-popup"
    @update:show="handleUpdateShow"
  >
    <div class="find-partner-popup__container">
      <!-- title -->
      <h3 class="find-partner-popup__title">
        {{ t('home.findPartner.title') }}
      </h3>

      <!-- white card -->
      <section class="find-partner-popup__card">
        <div
          v-for="section in state.sections"
          :key="section.id"
          class="find-partner-popup__section"
        >
          <p class="find-partner-popup__section-title">
            {{ t(section.titleKey) }}
          </p>
          <div class="find-partner-popup__tags-row">
            <button
              v-for="tag in section.tags"
              :key="tag.id"
              type="button"
              class="find-partner-popup__tag"
              :class="{
                'find-partner-popup__tag--active':
                  state.selected[section.id] === tag.id,
              }"
              @click="toggleTag(section.id, tag.id)"
            >
              {{ section.id === 'region' ? t(`region.${tag.labelKey}`, {}, tag.labelKey) : t(tag.labelKey) }}
            </button>
          </div>
        </div>
      </section>

      <!-- bottom button -->
      <button
        type="button"
        class="find-partner-popup__submit"
        @click="handleSubmit"
      >
        {{ t('home.findPartner.submit') }}
      </button>
    </div>
  </van-popup>
</template>

<style scoped lang="scss">
.find-partner-popup {
  background-color: transparent;

  &__container {
    position: relative;
    padding: 16px 16px 24px;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(181deg, #B7EEFF 0.58%, #FFF 99.62%);
  }

  &__title {
    text-align: center;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 15px;
  }

  &__game-tabs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  &__game-tab {
    flex: 1;
    padding: 4px 0;
    border: none;
    background: transparent;
    font-size: 12px;
    color: #4e5969;
    border-radius: 999px;
  }

  &__game-tab--active {
    background-color: rgba(47, 150, 255, 0.7);
    color: #fff;
  }

  &__card {
    padding: 14px;
    border-radius: 12px;
    background-color: #fff;
  }

  &__section {
    & + & {
      margin-top: 12px;
    }
  }

  &__section-title {
    font-size: 14px;
    font-weight: 600;
    color: #1d2129;
    margin-bottom: 6px;
  }

  &__tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  &__tag {
    padding: 4px 11px;
    border-radius: 200px;
    border: none;
    background-color: #f9fafb;
    font-size: 13px;
    color: #4e5969;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  &__tag--active {
    background-color: #e6fffa;
    color: #3fbfbd;
    font-weight: 600;
  }

  &__submit {
    margin-top: 12px;
    @include size(100%, 47px);
    border: none;
    border-radius: 100px;
    background-image: linear-gradient(90deg, #2f95ff 0%, #50ffd8 100%);
    color: #fff;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}
</style>