<script setup>
const props = defineProps({
  name: {
    type: String,
    default: "",
  },
  src: {
    type: String,
    default: "",
  },
  onClick: {
    type: Function,
    default: () => {},
  },
  width: {
    type: Number,
    default: "22",
  },
});
</script>
<template>
  <view class="container" @click="onClick">
    <image :src="src" mode="widthFix" :style="{ width: width + 'px' }" />
    <text>{{ name }}</text>
  </view>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container > text {
  color: #666666;
  font-size: 12px;
  margin-top: 5px;
}
</style>
