ListTimeline list

---
interface Props {
  items: Array<{ date: string; title: string; desc?: string }>;
}
const { items = [
  { date: "2020", title: "BLURR opgericht", desc: "Gestart als klein Google Ads bureau in Amsterdam." },
  { date: "2021", title: "Team uitgebreid", desc: "Van 2 naar 12 specialisten in één jaar." },
  { date: "2022", title: "Eerste €1M omzet", desc: "Mijlpaal bereikt voor onze klanten." },
  { date: "2024", title: "Landelijke naam", desc: "Top 10 snelst groeiende marketingbureaus NL." },
] } = Astro.props;
---

<div class="lst-tl">
  {items.map(item => (
    <div class="lst-tl__item">
      <div class="lst-tl__aside">
        <span class="lst-tl__date">{item.date}</span>
        <div class="lst-tl__connector">
          <div class="lst-tl__dot"></div>
          <div class="lst-tl__line"></div>
        </div>
      </div>
      <div class="lst-tl__body">
        <strong class="lst-tl__title">{item.title}</strong>
        {item.desc && <p class="lst-tl__desc">{item.desc}</p>}
      </div>
    </div>
  ))}
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .lst-tl { display: flex; flex-direction: column; }
  .lst-tl__item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1rem;
    position: relative;
  }
  .lst-tl__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    position: relative;
  }
  .lst-tl__date {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.04em;
    padding-top: 0.1rem;
  }
  .lst-tl__connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 0;
    position: absolute;
    right: -1rem;
    top: 0.5rem;
    bottom: 0;
  }
  .lst-tl__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
  }
  .lst-tl__line {
    width: 2px;
    flex: 1;
    background: #e5e5e5;
    min-height: 1rem;
  }
  .lst-tl__item:last-child .lst-tl__line { display: none; }
  .lst-tl__body { padding-bottom: 1.75rem; padding-left: 0.5rem; }
  .lst-tl__title {
    display: block;
    font-size: 0.975rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.2rem;
  }
  .lst-tl__desc {
    margin: 0;
    font-size: 0.875rem;
    color: #666;
    line-height: 1.55;
  }
</style>