ListHorizontal list

---
interface Props {
  items: Array<{ label: string; value?: string }>;
}
const { items = [
  { label: "Google Ads", value: "Specialist" },
  { label: "Meta Ads", value: "Certified" },
  { label: "SEO", value: "Expert" },
  { label: "Analytics", value: "GA4" },
  { label: "CRO", value: "Bewezen" },
  { label: "E-mail", value: "Klaviyo" },
  { label: "LinkedIn", value: "B2B" },
  { label: "Video", value: "YouTube" },
] } = Astro.props;
---

<div class="lst-hor">
  <ul class="lst-hor__list">
    {items.map(item => (
      <li class="lst-hor__item">
        <span class="lst-hor__label">{item.label}</span>
        {item.value && <span class="lst-hor__value">{item.value}</span>}
      </li>
    ))}
  </ul>
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .lst-hor { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lst-hor__list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    display: flex;
    gap: 0.75rem;
    width: max-content;
  }
  .lst-hor__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.9rem 1.25rem;
    border: 1.5px solid #e5e5e5;
    border-radius: 0.75rem;
    min-width: 100px;
    transition: border-color 0.2s;
  }
  .lst-hor__item:hover { border-color: var(--color-accent); }
  .lst-hor__label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary);
  }
  .lst-hor__value {
    font-size: 0.75rem;
    color: var(--color-accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
</style>