<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
        "
      >
        <IconVue :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 IconVue from "@/components/common/Icon.vue";
import { defineComponent } from "vue";
export default defineComponent({
  components: { IconVue },
  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>
