---
// 갱신 기록. 무엇을 언제 바꿨는지 독자가 볼 수 있게 한다.
interface Props { items: { date: string; note: string }[] }
const { items } = Astro.props;
---
{items.length > 0 && (
  <section class="history" aria-label="갱신 기록">
    <h2>갱신 기록</h2>
    <ul>{[...items].reverse().map((h) => <li><time datetime={h.date}>{h.date}</time> {h.note}</li>)}</ul>
  </section>
)}
<style>
  .history ul { list-style: none; padding: 0; margin: 0; font-size: 0.92rem; }
  .history li { padding: 0.35rem 0; border-bottom: 1px solid var(--slate-100); }
  .history time { display: inline-block; min-width: 6.5em; color: var(--slate-500); font-variant-numeric: tabular-nums; }
</style>