gami-web/app/components/common/Gender.vue

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import MaleIcon from '~/assets/images/common/male.png'
import FemaleIcon from '~/assets/images/common/female.png'

interface Props {
  gender: 0 | 1 | 2 // 0=未知，1=男，2=女
  age?: number
}

const props = defineProps<Props>()

// If gender is unknown (0), don't display the component
const shouldDisplay = computed(() => props.gender !== 0)

const genderIcon = computed(() => {
  return props.gender === 1 ? MaleIcon : FemaleIcon
})

const { t } = useI18n()

const genderText = computed(() => {
  return props.gender === 1 ? t('gender.male') : t('gender.female')
})
</script>

<template>
  <div
    v-if="shouldDisplay"
    class="gender-display inline-flex items-center justify-end"
  >
    <img
      :src="genderIcon"
      :alt="genderText"
      class="gender-icon absolute"
    >
    <div class="age-container flex items-center justify-center">
      <span class="age-text text-xs font-medium text-white z-10">
        {{ age || t('gender.ageUnknown') }}
      </span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.gender-display {
  width: 32px;
  height: 15px;
  position: relative;

  .gender-icon {
    object-fit: contain;
  }

  .age-container {
    width: 14px;
    margin-right: 4px;

    .age-text {
      font-size: 11px;
      line-height: 14px;
    }
  }
}
</style>