fashion-ssr-vue3/components/common/navigation/icon-group.vue

<script lang='ts' setup>
import trend from '@/assets/images/category/normal/trend.png'
import tech from '@/assets/images/category/normal/tech.png'
import lifeStyle from '@/assets/images/category/normal/lifestyle.png'
import stationery from '@/assets/images/category/normal/stationery.png'
import fashion from '@/assets/images/category/normal/fashion.png'
import gifts from '@/assets/images/category/normal/gifts.png'
import creative from '@/assets/images/category/normal/creative.png'
import health from '@/assets/images/category/normal/health.png'

import trendActive from '@/assets/images/category/active/trend_active.png'
import techActive from '@/assets/images/category/active/tech_active.png'
import lifeStyleActive from '@/assets/images/category/active/lifestyle_active.png'
import stationeryActive from '@/assets/images/category/active/stationery_active.png'
import fashionActive from '@/assets/images/category/active/fashion_active.png'
import giftsActive from '@/assets/images/category/active/gifts_active.png'
import creativeActive from '@/assets/images/category/active/creative_active.png'
import healthActive from '@/assets/images/category/active/health_active.png'

defineProps({
  icon: {
    type: String,
    default: '',
  },
  active: {
    type: String,
    default: '',
  },
})
</script>

<template>
  <div class="">
    <img v-if="icon === 'trend-toys-collectibles'" :src="active === 'trend-toys-collectibles' ? trendActive : trend" alt="" class="!w-20px !h-20px">
    <img v-if="icon === 'tech-gadgets-accessories'" :src="active === 'tech-gadgets-accessories' ? techActive : tech" alt="" class="!w-20px !h-20px">
    <img v-if="icon === 'lifestyle-wellness'" :src="active === 'lifestyle-wellness' ? lifeStyleActive : lifeStyle" alt="" class="!w-20px !h-20px">
    <img v-if="icon === 'stationary-office-supplies'" :src="active === 'stationary-office-supplies' ? stationeryActive : stationery" alt="" class="!w-20px !h-20px">
    <img v-if="icon === 'fashion-accessories'" :src="active === 'fashion-accessories' ? fashionActive : fashion" alt="" class="!w-20px !h-20px">
    <img v-if="icon === 'gifts-seasonal-items'" :src="active === 'gifts-seasonal-items' ? giftsActive : gifts" alt="" class="!w-20px !h-20px">
    <img v-if="icon === 'creative-home-products'" :src="active === 'creative-home-products' ? creativeActive : creative" alt="" class="!w-20px !h-20px">
    <img v-if="icon === 'beauty-personal-care'" :src="active === 'beauty-personal-care' ? healthActive : health" alt="" class="!w-20px !h-20px">
  </div>
</template>

<style lang='less' scoped>
</style>