---
import { SOCIAL_LINKS } from "@/data/constants";

// *** SVG icons from https://tablericons.com/ ***
---

<div class="flex flex-wrap items-center gap-x-4 sm:items-center">
	<p>Find me on</p>
	<ul class="flex flex-1 items-center gap-x-4 sm:flex-initial">
		<li>
			<a
				class="inline-block p-2 sm:hover:text-link"
				href={SOCIAL_LINKS.github}
				target="_blank"
				rel="noopener noreferrer"
			>
				<svg
					class="h-6 w-6"
					aria-hidden="true"
					focusable="false"
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 24 24"
					stroke-width="1.5"
					stroke="currentColor"
					fill="none"
					stroke-linecap="round"
					stroke-linejoin="round"
				>
					<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
					<path
						d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"
					>
					</path>
				</svg>
				<span class="sr-only">Github</span>
			</a>
		</li>
		<li>
			<a
				class="inline-block p-2 sm:hover:text-link"
				href={SOCIAL_LINKS.twitter}
				target="_blank"
				rel="noopener noreferrer"
			>
				<svg
					class="h-6 w-6"
					aria-hidden="true"
					focusable="false"
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 24 24"
					stroke-width="1.5"
					stroke="currentColor"
					fill="none"
					stroke-linecap="round"
					stroke-linejoin="round"
				>
					<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
					<path
						d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"
					>
					</path>
				</svg>
				<span class="sr-only">Twitter</span>
			</a>
		</li>
		<li>
			<a
				class="inline-block p-2 sm:hover:text-link"
				href={SOCIAL_LINKS.medium}
				target="_blank"
				rel="noopener noreferrer"
			>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="h-6 w-6"
					viewBox="0 0 24 24"
					stroke-width="1.5"
					stroke="currentColor"
					fill="none"
					stroke-linecap="round"
					stroke-linejoin="round"
				>
					<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
					<rect x="4" y="4" width="16" height="16" rx="2"></rect>
					<path d="M8 9h1l3 3l3 -3h1"></path>
					<line x1="8" y1="15" x2="10" y2="15"></line>
					<line x1="14" y1="15" x2="16" y2="15"></line>
					<line x1="9" y1="9" x2="9" y2="15"></line>
					<line x1="15" y1="9" x2="15" y2="15"></line>
				</svg>
				<span class="sr-only">Medium</span>
			</a>
		</li>
		<li>
			<a
				class="inline-block p-2 sm:hover:text-link"
				href={SOCIAL_LINKS.linkedin}
				target="_blank"
				rel="noopener noreferrer"
			>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="h-6 w-6"
					width="44"
					height="44"
					viewBox="0 0 24 24"
					stroke-width="1.5"
					stroke="currentColor"
					fill="none"
					stroke-linecap="round"
					stroke-linejoin="round"
				>
					<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
					<rect x="4" y="4" width="16" height="16" rx="2"></rect>
					<line x1="8" y1="11" x2="8" y2="16"></line>
					<line x1="8" y1="8" x2="8" y2="8.01"></line>
					<line x1="12" y1="16" x2="12" y2="11"></line>
					<path d="M16 16v-3a2 2 0 0 0 -4 0"></path>
				</svg>
				<span class="sr-only">LinkedIn</span>
			</a>
		</li>
		<li>
			<a
				class="inline-block p-2 sm:hover:text-link"
				href={SOCIAL_LINKS.ethereum}
				target="_blank"
				rel="noopener noreferrer"
			>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="h-6 w-6"
					width="44"
					height="44"
					viewBox="0 0 24 24"
					stroke-width="1.5"
					stroke="currentColor"
					fill="none"
					stroke-linecap="round"
					stroke-linejoin="round"
				>
					<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
					<path d="M6 12l6 -9l6 9l-6 9z"></path>
					<path d="M6 12l6 -3l6 3l-6 2z"></path>
				</svg>
				<span class="sr-only">Ethereum</span>
			</a>
		</li>
	</ul>
</div>