---
/**
* Timeline.astro
* ---------------------------------------------------------------------------
* Vertical timeline for the Experience section. Each entry has a marker (mdi
* icon), a period label, company/title, focus, and rendered markdown body (the
* bullet list from the experience collection entry).
*
* The vertical line is drawn with a pseudo-element; markers sit on it. Entry
* bodies are expandable detail (the spec asks for "expandable detail"). On
* small screens the marker line stays but spacing tightens.
*
* Astro 7 content layer: `render(entry)` returns `{ Content }` (an Astro
* component), which we render with `` rather than stringifying.
*/
import { type CollectionEntry, render } from 'astro:content';
import Icon from '@components/Icon.astro';
import Reveal from '@components/motion/Reveal.astro';
interface Props {
entries: CollectionEntry<'experience'>[];
}
const { entries } = Astro.props;
// Pre-render each entry to get its Content component (Astro 7 API).
const rendered = await Promise.all(
entries.map(async (e) => ({
entry: e,
Content: (await render(e)).Content,
})),
);
---
{rendered.map(({ entry, Content }, i) => (
{/* Header row: icon + company name inline, period on the right. */}