gami-web/app/components/home/SortSection.vue

<script setup lang="ts">
import SortSvg from '~/assets/icons/sort.svg'
import SortUpSvg from '~/assets/icons/sort-up.svg'
import SortDownSvg from '~/assets/icons/sort-down.svg'

type SortOption = {
  label: string
  value: string
}

type SortDirection = 'none' | 'asc' | 'desc'

const sortOptions: SortOption[] = [
  { label: '评分', value: 'rating' },
  { label: '价格', value: 'price' },
]

const activeSort = ref<SortOption['value']>(sortOptions[0]?.value ?? '')
const sortDirections = ref<Record<string, SortDirection>>({
  rating: 'none',
  price: 'none',
})

// Handle sort click
const handleSort = (sortValue: string) => {
  const currentDirection = sortDirections.value[sortValue]

  // Cycle through: none -> desc -> asc -> none -> ...
  if (currentDirection === 'none') {
    sortDirections.value[sortValue] = 'desc'
  }
  else if (currentDirection === 'desc') {
    sortDirections.value[sortValue] = 'asc'
  }
  else {
    sortDirections.value[sortValue] = 'none'
  }

  activeSort.value = sortValue
}

// Get sort icon component based on direction
const getSortIcon = (sortValue: string) => {
  const direction = sortDirections.value[sortValue]
  if (direction === 'asc')
    return SortUpSvg
  if (direction === 'desc')
    return SortDownSvg
  return SortSvg
}
</script>

<template>
  <section class="flex flex-wrap items-center justify-between bg-bg-primary z-50">
    <div class="flex gap-4 text-xs font-normal text-text-secondary">
      <button
        v-for="sortOption in sortOptions"
        :key="sortOption.value"
        class="flex items-center gap-1 py-1"
        :class="sortDirections[sortOption.value] !== 'none' ? 'text-text-primary' : ''"
        @click="handleSort(sortOption.value)"
      >
        {{ sortOption.label }}
        <component :is="getSortIcon(sortOption.value)" />
      </button>
    </div>
    <van-button
      round
      size="small"
      class="find-btn flex items-center justify-center"
      plain
      type="primary"
    >
      <span class="text-xs font-semibold text-text-secondary">Find your partner</span>
      <van-icon
        class="ml-1 text-text-secondary"
        name="arrow"
        size="14"
      />
    </van-button>
  </section>
</template>

<style lang="scss" scoped>
.find-btn {
  @include size(152px, 40px);
  border-radius: 20px;
  border: 1px solid #FFF;
  background: linear-gradient(90deg, rgba(183, 238, 255, 0.60) 0.01%, rgba(221, 255, 183, 0.60) 26.99%, rgba(255, 255, 255, 0.60) 75.07%);
}
</style>