troylusty.com/src/components/Skills.astro

---
import { getCollection } from "astro:content";
import { Icon } from "astro-icon/components";

const collection = await getCollection("skills");

const skills = await Promise.all(
  collection.map(async (item) => {
    const { Content } = await item.render();
    return { ...item, Content };
  }),
);
---

<ul class="flex max-w-full list-none flex-wrap gap-4 px-0">
  {
    skills.map((entry) => (
      <li class="group flex items-center gap-2 rounded border border-tertiary p-2 text-tertiary transition-colors hover:border-accent hover:text-accent">
        <Icon
          name={entry.data.icon}
          title={entry.data.title}
          class="h-6 w-auto text-tertiary transition-colors group-hover:text-accent"
        />
        <p class="m-0 cursor-default">{entry.data.title}</p>
      </li>
    ))
  }
</ul>