<script lang="ts" setup>
import { Card, CardGrid } from 'ant-design-vue'

interface NavItem {
  title: string
  icon: string
  color: string
}

const navItems: NavItem[] = [
  {
    title: '首页',
    icon: 'i-ion:home-outline',
    color: '#1fdaca',
  },
  {
    title: '仪表盘',
    icon: 'i-ion:grid-outline',
    color: '#bf0c2c',
  },
  {
    title: '组件',
    icon: 'i-ion:layers-outline',
    color: '#e18525',
  },
  {
    title: '系统管理',
    icon: 'i-ion:settings-outline',
    color: '#3fb27f',
  },
  {
    title: '权限管理',
    icon: 'i-ion:key-outline',
    color: '#4daf1bc9',
  },
  {
    title: '图表',
    icon: 'i-ion:bar-chart-outline',
    color: '#00d8ff',
  },
]
</script>

<template>
  <Card title="快捷导航">
    <CardGrid v-for="item in navItems" :key="item.title">
      <span class="flex flex-col items-center">
        <span :class="item.icon" :style="{ color: item.color }" class="text-[20px]" />
        <span class="text-md mt-2 truncate">{{ item.title }}</span>
      </span>
    </CardGrid>
  </Card>
</template>
