---
// src/components/List.astro
interface Props {
  items: string[];
}

const { items } = Astro.props;
---

<ul>
  {items.map((item) => <li>{item}</li>)}
</ul>

<!-- src/pages/index.astro -->
---
import List from '../components/List.astro';
---

<List items={['Alpha', 'Beta', 'Gamma']} />

<!--
  Notes:
  - items.map() runs inside a {} markup expression, exactly like it
    would inside JSX — no separate v-for/{#each} directive syntax
    needed.
  - Each <li> needs no explicit "key" prop the way React's own list
    rendering does, since Astro doesn't do client-side reconciliation
    at all for a static component like this one.
-->