---
import type { Link } from "@/types";

interface Props {
	links: Link[];
}
const { links } = Astro.props;
---

<ul>
    {links.map((link) => (
   	  <li>
          <a class="link" href={link.href}>{link.title}</a>
      </li>
    ))}
</ul>

<style>
ul {
    display: inline-flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;

    li {
        margin-left: 2ch;
    }

    a {
        --fg: var(--subtext1);

        display: inline-flex;
        align-items: center;
        gap: 1ch;

        font-size: 1.25rem;
        font-weight: 500;

        svg {
            width: 1.5rem;
            height: 1.5rem;
        }
    }
}
</style>