---
import GitHubIcon from "../assets/icons/socials/github.svg";
import BlueskyIcon from "../assets/icons/socials/bluesky.svg";
import RedditIcon from "../assets/icons/socials/reddit.svg";
import DiscordIcon from "../assets/icons/socials/discord.svg";
import TwitterIcon from "../assets/icons/socials/twitter.svg";
import AniListIcon from "../assets/icons/socials/anilist.svg";
import LastFMIcon from "../assets/icons/socials/lastfm.svg";
import MailIcon from "../assets/icons/socials/mail.svg";
---

<section class="side p-2!">
	<legend>socials</legend>
	<ul class="grid grid-cols-4 [&_a]:flex [&_a]:justify-center [&_a]:size-full [&_a]:py-1">
		<!-- z-50 for tooltips -->
		<li class="z-50">
			<a href="https://github.com/trafficlunar" data-tooltip="GitHub"><GitHubIcon /></a>
		</li>
		<li class="z-50">
			<a href="https://bsky.app/profile/trafficlunar.net" data-tooltip="Bluesky"><BlueskyIcon /></a>
		</li>
		<li class="z-50">
			<a href="https://www.twitter.com/trafficlunr" data-tooltip="Twitter"><TwitterIcon /></a>
		</li>
		<li class="z-50">
			<a href="https://discord.gg/48cXBFKvWQ" data-tooltip="Discord"><DiscordIcon /></a>
		</li>
		<li>
			<a href="https://www.reddit.com/user/trafficlunr" data-tooltip="Reddit"><RedditIcon /></a>
		</li>
		<li>
			<a href="https://anilist.co/user/trafficlunar/" data-tooltip="AniList"><AniListIcon /></a>
		</li>
		<li>
			<a href="https://www.last.fm/user/axolotlmaid" data-tooltip="Last.FM"><LastFMIcon /></a>
		</li>
		<li>
			<a href="mailto:hello@trafficlunar.net" data-tooltip="E-mail"><MailIcon /></a>
		</li>
	</ul>
</section>