ListIcons list

---
interface Props {
  items: Array<{ icon: string; text: string }>;
}
const { items = [
  { icon: "🎯", text: "Doelgerichte campagnes" },
  { icon: "📊", text: "Inzichtelijke rapportages" },
  { icon: "⚡", text: "Snelle resultaten" },
  { icon: "🤝", text: "Persoonlijk contact" },
  { icon: "💡", text: "Creatieve oplossingen" },
] } = Astro.props;
---

<ul class="lst-ico">
  {items.map(item => (
    <li class="lst-ico__item">
      <span class="lst-ico__icon">{item.icon}</span>
      <span class="lst-ico__text">{item.text}</span>
    </li>
  ))}
</ul>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .lst-ico {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .lst-ico__item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
  }
  .lst-ico__icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
  }
  .lst-ico__text {
    font-size: 0.975rem;
    color: var(--color-primary);
    font-weight: 500;
  }
</style>