---

import { getSocial } from "@/data/constants";

const items = ["email", "rss", "github", "atproto"].map(

	(key) => getSocial(key)!,

);

---

<div class="flex flex-wrap items-center gap-x-4 sm:items-center">

	<p class="pb-2">Find me on</p>

	<ul class="flex flex-1 items-center gap-x-4 sm:flex-initial">

		{

			items.map((link) => (

				<li>

					<a

						class="inline-block 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} />

						<span class="sr-only">{link.name}</span>

					</a>

				</li>

			))

		}

	</ul>

</div>