---

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>