---
import { Sprite } from 'astro-icon';

import { Link } from '.';

import data from '../data/social-links.json';
---

<div class="flex flex-1 sm:justify-center">
	{
		data.map(({ text, url, icon, props = {} }) => (
			<Link
				aria-label={text}
				class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center"
				href={url}
				title={text}
				{...props}
			>
				<Sprite name={icon} class="h-icon-small w-icon-small" />
			</Link>
		))
	}
</div>
