---
import PageLayout from "@/layouts/Base.astro";
import { SOCIAL_ITEMS } from "@/data/constants";

const meta = {
	title: "/links",
	description: "Connect with me on all the things",
};
---

<PageLayout meta={meta}>
  <div class="space-y-6">
    <h1 class="title mb-6">/links</h1>
    <ul class="flex flex-col items-start gap-x-4 sm:flex-initial">
      {
        SOCIAL_ITEMS.map((link) => (
          <li>
            <a
              class="flex items-center gap-4 p-2 sm:hover:text-link"
              href={link.href}
              target={link.external ? "_blank" : undefined}
              rel={link.external ? "noopener noreferrer" : undefined}
            >
              <Fragment set:html={link.icon} />
              {link.name}
              <span class="sr-only">{link.name}</span>
            </a>
          </li>
        ))
      }
    </ul>
  </div>
</PageLayout>