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

<script setup lang="ts">
import TabActiveSvg from '~/assets/icons/tab-active.svg'
import MoreSvg from '~/assets/icons/more.svg'

type NavTab = {
  label: string
  value: string
}

type FeaturedGame = {
  label: string
  image?: string
  isMore?: boolean
}

const assets = {
  gameMobile: 'https://www.figma.com/api/mcp/asset/caa36564-9d8d-4632-976c-9fc682b3d8d9',
  gameFreeFire: 'https://www.figma.com/api/mcp/asset/d475b197-3a66-4191-a968-215b443b6323',
  gamePubg: 'https://www.figma.com/api/mcp/asset/3931728a-428b-4f5e-a603-108352c802a3',
} as const

const navTabs: NavTab[] = [
  { label: 'Online Play', value: 'online' },
  { label: 'PC Game', value: 'pc' },
  { label: 'Activity', value: 'activity' },
]

const featuredGames: FeaturedGame[] = [
  { label: 'Mobile Legends', image: assets.gameMobile },
  { label: 'FREE FIRE', image: assets.gameFreeFire },
  { label: 'PUBG', image: assets.gamePubg },
  { label: 'More', isMore: true },
]

const activeTab = ref<NavTab['value']>(navTabs[0]?.value ?? '')
const activeCategory = ref<FeaturedGame['label']>(featuredGames[0]?.label ?? '')
</script>

<template>
  <section>
    <nav class="flex items-center gap-4 text-base">
      <div
        v-for="tab in navTabs"
        :key="tab.value"
        class="relative flex items-center justify-center"
        :class="activeTab === tab.value ? 'text-text-primary text-title' : 'text-text-secondary'"
        @click="activeTab = tab.value"
      >
        <TabActiveSvg
          v-if="activeTab === tab.value"
          class="absolute z-0"
        />
        <span class="relative z-10 font-title">{{ tab.label }}</span>
      </div>
    </nav>

    <div class="mt-2 flex gap-4 overflow-x-auto no-scrollbar">
      <div
        v-for="game in featuredGames"
        :key="game.label"
        class="category-item flex min-w-[72px] flex-col items-center justify-end gap-1"
        @click="activeCategory = game.label"
      >
        <div
          v-if="activeCategory === game.label"
          class="category-item-active absolute z-0 mt-auto"
        />
        <div class="category-image flex relative z-10">
          <template v-if="game.image">
            <img
              :src="game.image"
              :alt="game.label"
              class="size-full"
              loading="lazy"
            >
          </template>
          <template v-else>
            <MoreSvg />
          </template>
        </div>
        <p class="max-w-full truncate font-sans text-xs font-light text-[#1b1919] relative shrink-0 z-10 mb-2">
          {{ game.label }}
        </p>
      </div>
    </div>
  </section>
</template>

<style lang="scss" scoped>
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.category-item {
  width: 102px;

  .category-item-active {
    width: 102px;
    height: 68px;
    flex-shrink: 0;
    border-radius: 30px 12px 12px 12px;
    border: 1px solid #FFF;
    background: linear-gradient(228deg, #DEF8DE 0%, #BDF5FF 73.53%);
  }
  .category-image {
    @include size(50px, 50px);
  }
}
</style>