<template>
  <section class="commissions-section section">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="row commissions-main hr-x">
            <div class="col-12 commissions-header">
              <h1 class="commissions-header-title mr-3">کمیسیونها</h1>
            </div>
            <div class="col-12">
              <div class="d-grid">
                <div
                  class="grid-item"
                  v-for="(item, index) in menu.commissions"
                  :key="index"
                >
                  <div class="card">
                    <div class="my-card-header">
                      <svg class="card-icon" :class="`icon icon-` + item.icon">
                        <use xlink :href="`#icon-` + item.icon"></use>
                      </svg>
                    </div>
                    <div class="card-body">
                      <h5 class="card-title">
                        {{ item.title }}
                      </h5>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import menu from "~/json/dashboard/majles/json/majlesDashboard.json";
export default {
  data() {
    return {
      menu: menu,
      typingTimer: 0,
      doneTypingInterval: 500,
    };
  },
};
</script>