<script setup lang="ts">
const { data: stats } = useFetch('/api/stats')
</script>
<template>
<ZWidget card title="分类展示">
  <div class="category_cloud">
    <ZRawLink v-for="item in stats?.tags" :to="'/?tag=' + item.name" class="category">
      {{ item.name }}
      <sup>{{ item.posts }}</sup>
    </ZRawLink>
  </div>
</ZWidget>
</template>

<style lang="scss" scoped>
  .category_cloud {
    display: flex;
    flex-wrap: wrap;
    // overflow-y: scroll;
    gap: 4px;

    .category {
      color: var(--heo-fontcolor) !important;
      padding: 2px 8px;
      border-radius: 8px;
      background: var(--heo-card-bg);
      border: var(--style-border);
      font-size: 14px !important;
      font-weight: 700;

      sup {
        opacity: .6;
        top: -.5em;
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
      }
    }
  }
  
</style>

export interface siteInfo {
    title: string
}

export interface siteTabs {
    name: string
    itemnumber: string
    Item: Item[]
}

export interface Item {
    name: string
    image: string
    link: string
    desc: string
    service: service[]
}

export interface service {
    name: string
    image: string
    link: string
}

export const siteLinkWidgetInfo: siteInfo[] = [
    {
        title: '站点线路',
    }
]

export const siteLinkItems: siteTabs[] = [
    {
        name: '镜像站点',
        itemnumber: '3',
        Item: [
            {
                name: '博客镜像',
                image: 'https://sourceimage.s3.bitiful.net/myxz.avif',
                link: 'https://blog-v3.edgeone.mirrors.myxz.top',
                desc: "可以通过不同线路去访问",
                service: [
                    { 
                        name: 'EdgeOne', 
                        image: '/assets/img/link/service/edgeone.jpg', 
                        link: "https://blog-v3.edgeone.mirrors.myxz.top"
                    },
                    {
                        name: "Vercel",
                        image: "/assets/img/link/service/vercel.jpg",
                        link: "https://blog-v3.vercel.mirrors.myxz.top"
                    },
                    {
                        name: "Netlify",
                        image: "/assets/img/link/service/netlify.jpg",
                        link: "https://blog-v3.netifly.mirrors.myxz.top"
                    }
                ],
            },
        ]
    },
    {
        name: '服务',
        itemnumber: '1',
        Item: [
            {
                name: '说说',
                image: 'https://sourceimage.s3.bitiful.net/myxz.avif',
                link: 'https://blog-v3.myxz.top',
                desc: "",
                service: [
                    { 
                        name: 'EdgeOne', 
                        image: '/assets/img/link/service/edgeone.jpg', 
                        link: "" 
                    }
                ],
            }
        ]
    },
]