---
import socials from '@data/socials.json'
---

<table class="table table-vcenter">
  <thead>
    <tr>
      <th class="w-1">App</th>
      <th>Name</th>
      <th>CSS class</th>
    </tr>
  </thead>
  <tbody>
    {
      socials.map((social) => (
        <tr>
          <td>
            <div class={`social social-sm social-app-${social.file}`} />
          </td>
          <td>{social.name}</td>
          <td>
            <>
              <code>.social-app-{social.file}</code>
              <br />
            </>
          </td>
        </tr>
      ))
    }
  </tbody>
</table>