<template>
  <div
    @click="$emit('click')"
    class="
      item
      overflow-hidden overflow-ellipsis
      flex
      items-center
      justify-center
    "
    :class="{
      active: active,
    }"
  >
    {{ name }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  emits: ["click"],
  props: ["name", "active"],
});
</script>
<style lang="less" scoped>
.item {
  width: 131px;
  height: 40px;
  background: #f7f7fa;
  border-radius: 5px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1b1f37;
}
.active {
  background: #3e4faf;
  color: #ffffff;
}
</style>
