boursecu_user/src/views/base/home/desktop/components/DesktopQuickActionsGrid.vue

<script setup lang="ts">
import { computed } from 'vue'
import router from '@/router'
import HomeQuickActionBox from '../../components/HomeQuickActionBox.vue'
import DesktopHomeCard from './DesktopHomeCard.vue'
import { boursecuQuickActions } from '../../layouts/configs/boursecuQuickActions'
import type { HomeQuickActionItem } from '../../layouts/types'

const props = withDefaults(
  defineProps<{
    actions?: HomeQuickActionItem[]
  }>(),
  {
    actions: undefined,
  },
)

const resolvedActions = computed(() => props.actions ?? [...boursecuQuickActions])

function handleClick(action: HomeQuickActionItem) {
  if (action.handler) {
    action.handler()
    return
  }
  if (action.route) {
    router.push(action.route)
  }
}
</script>

<template>
  <DesktopHomeCard title="دسترسی سریع">
    <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-6">
      <HomeQuickActionBox
        v-for="action in resolvedActions"
        :key="action.id"
        :action="action"
        class="home-desktop-quick-action"
        @click="handleClick(action)"
      />
    </div>
  </DesktopHomeCard>
</template>

<style scoped>
:deep(.home-desktop-quick-action) {
  min-height: 108px;
}
</style>