---
import MarkdownSource from './MarkdownSource.astro'
import { markdownTable } from '@shared/lib/markdown-source'
import socials from '@data/socials.json'

// Same list as a table for the page's .md mirror
const markdown = markdownTable(
  ['App', 'CSS class'],
  socials.map((social) => [social.name, `\`.social-app-${social.file}\``]),
)
---

<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 class="p-2">
            <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>
<MarkdownSource name="Socials" markdown={markdown} />