<template>
  <div class="flex flex-wrap">
    <div
      v-for="app in appList"
      :key="app.name"
      class="w-1/4 mb-5 text-center"
      @click="app.cb && app.cb() || $router.push({ name: app.routerName })"
    >
      <div class="w-16 h-16 bg-white app-container mx-auto flex items-center justify-center">
        <Icon :name="app.icon" :color="app.color" size="25" />
      </div>
      <div class="mt-2.5 app-name">{{ app.name }}</div>
    </div>
  </div>
</template>
<script lang="ts">
import Icon from "@/components/common/Icon.vue";
import { defineComponent } from "vue";
export default defineComponent({
  components: { Icon },
  props: ["appList"],
});
</script>
<style scoped>
.app-container {
  box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
  border-radius: 20px;
}
.app-name {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1b1f37;
}
</style>