---
import { SOCIALS } from "@config";
import { Icon } from "astro-icon/components";
---

<table>
  <tr>

    {
      SOCIALS.map(social => (
        <td>
          <a href={social.href} target="_blank" rel="noopener noreferrer">
            <Icon name={social.icon} title={social.name} class="icon has-text-white" />
          </a>
        </td>
      ))
    }

  </tr>
</table>

<style>

    table { width: 100% }

    .icon {

        max-width: 55px;
        width: 100%;
        height: auto;
        flex-shrink: 1;

        padding: 0 6px 0 6px;

        display: block;
        margin-left: auto;
        margin-right: auto;

    }

</style>
