<template>
  <div class="board-data-list">
    <div class="grid">
      <article v-for="p in posts" :key="p.id" class="card">
        <div class="thumb"></div>
        <h4>{{ p.title }}</h4>
        <small>{{ p.author }} · {{ p.date }}</small>
      </article>
    </div>
  </div>
</template>
<script setup>defineProps({ posts: { type:Array, default: ()=>[] } });</script>
<style scoped>
.board-data-list .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; padding:16px; }
.card { background:#fff; border:1px solid #eee; border-radius:10px; overflow:hidden; padding:12px; }
.thumb { aspect-ratio:4/3; background:linear-gradient(135deg,#e0eefe,#0f5fa8); border-radius:6px; margin-bottom:8px; }
h4 { font-size:15px; margin:0 0 4px; } small { color:#777; font-size:12px; }
</style>
