---
import Page from '../layouts/Page.astro'
import { Icon } from 'astro-icon/components';
import contacts from "../data/contacts.json";
---
<Page title="Contacts" description="Follow me on these platforms">
    <main>
        {contacts.map((contact)=> {
            let icon = "fa6-brands:" + contact.icon;
            return (
                    <a href={contact.url} target="_blank" title={contact.mouseover}><div class="contacts-card">
                        <Icon name={icon} class="contact-icon" />
                        {contact.platform} ({contact.username})
                    </div></a>
            )
        })}
    </main>
</Page>
<style>
    .contacts-card {
        display: flex;
        align-items: center;
        font-size: 1.2em;
        padding: 1em;
        margin: 1em;
        border-radius: 10px;
        background-color: #3B513B;
    }

    .contact-icon {
        margin: 0.1em 0.5em 0.1em 0.1em;
        font-size: 1.3em;
    }
</style>