---
const socials = [
  {
    name: "GitHub",
    url: "https://github.com/renatomce",
    icon: "i-uil-github",
  },
  {
    name: "LinkedIn",
    url: "https://www.linkedin.com/in/renatomce",
    icon: "i-uil-linkedin",
  },
  {
    name: "RSS",
    url: "/feed.xml",
    icon: "i-uil-rss",
  },

];
---

<section class='md:hidden'>
  <h2 class='hidden'>Socials section</h2>
  <ul class='flex justify-between'>
    {
      socials.map((item) => (
        <li class='bg-white px-4 py-2 text-green border-black border-2 rounded card-shadow'>
          <a href={item.url} target='_blank' title={`Go to ${item.name}`}>
            <div class:list={[item.icon, "p-6"]} />
          </a>
        </li>
      ))
    }
  </ul>
</section>