<script setup>
class moduleCard {
  title
  content
  url

  constructor(title, content, url) {
    this.title = title
    this.content = content
    this.url = url
  }
}

const modules = [
  {
    title: '',
    content: [
      new moduleCard('gitea', '', 'http://10.120.20.137:3000/'),
      new moduleCard('pve', '', 'http://10.120.20.15:8006/'),
      new moduleCard('zero tier', '', 'https://zerotier.yulinling.asia/'),
      new moduleCard('gitea', '', 'https://gitea.yulinling.asia/')
    ]
  }
]
</script>

<template>
  <div v-for="(item, index) in modules" :key="index" :style="{ width: 100 + '%' }">
    <a-typography-title>{{ item.title }}</a-typography-title>
    <ul :style="{ display: 'flex', flexWrap: 'wrap', margin: 'auto', justifyContent: 'center' }">
      <a-card
        v-for="(item, index) in item.content"
        :key="index"
        :style="{ width: 18 + '%', margin: '10px' }"
        hoverable
      >
        <a-card-meta :title="item.title">
          <template #description>
            <a-typography-link :href="item.url" target="_blank">{{ item.url }}</a-typography-link>
          </template>
        </a-card-meta>
      </a-card>
    </ul>
  </div>
</template>

<style scoped></style>
