---
import LinkCard from './linkCard.astro'
import socialData from '@datafiles/socials.json'
import { socials } from './socials'
---

<div>
  {
    socialData.map((item) => (
      <LinkCard
        {...{ icon: socials[item.icon], text: item.icon, link: item.link }}
      />
    ))
  }
</div>

<style>
  div {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 95%;
    height: auto;
    column-gap: 0.5rem;
    row-gap: 0.5rem;
  }
</style>