<template>
    <div class="cards-container" id="cards-container">
        <!-- 卡片将通过JavaScript动态生成 -->
        <LinkCardItem 
            v-for="it in props.portalData" 
            :key="it.id"
            :title="it.title" 
            :description="it.description" 
            :visits="it.visits" 
            :network-name="it.networkName" 
            :badge-name="it.network"
        />
    </div>
</template>

<script setup lang="ts">
    import { type  CardItem } from '@/types/CardItems';
    import LinkCardItem from './LinkCardItem.vue';

    // 模拟数据
    const props = withDefaults(defineProps<{
        portalData: Array<CardItem>
    }>(), {
        portalData: () => []
    })
</script>

<style scoped>
    .cards-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 50px;
        /* row-gap: 80px; */
    }
</style>