import IrcButton from '../components/IrcButton.js'

import styles from './repos.module.css'
import repos from '../data/repos.json'

export default function Repos (props) {
  return (
    <div>
      <div className={styles.description}>
        {repos.description}
      </div>
      <table className={styles.repoTable}>
        <thead>
          <tr>
            {repos.header.map((x, i) => {
              return (
                <td key={i}>
                  {x}
                </td>
              )
            })}
          </tr>
        </thead>
        <tbody>
          {Object.keys(repos.repos).map((key) => {
            let repo = repos.repos[key]
            return (
              <tr
                key={key}
              >
                <td>
                  {repo.description}
                </td>
                <td>
                  <a href={repo.href}>
                    GitLab repo
                  </a>
                </td>
                <td>
                  <a href={repo.href + '/issues'}>
                    Issues
                  </a>
                </td>
                <td>
                  <a href={repo.href + '/tree/master/devel'}>
                    Devel docs
                  </a>
                </td>
              </tr>
            )
          })}
        </tbody>
      </table>
      <IrcButton />
    </div>
  )
}