import Page from '../components/page';
import Header from '../components/header';
import Container from '../components/container';
import Section from '../components/section';

import PostLink from '../components/post-link';

import talks from '../static/talks.json';

export default () => (
  <Page>
    <Header />
    <Container>
      <h2>
        Software engineer at <a href="https://github.com/plingbr" title="PLING" target="_blank" rel="noopener">PLING</a>.
        JavaScript hacker.
        Decentralization enthusiast.
      </h2>

      <Section title="Talks" href="/talks">
        <ul>
          {
            talks.map(talk => (
              <li key={ talk.id } className="talk">
                <PostLink href={ talk.file } date={ talk.date } lang={ talk.lang } download>
                  { talk.title }
                </PostLink>
              </li>
            ))
          }
        </ul>
      </Section>
    </Container>

    <style jsx>{`
      h2 {
        font-size: 18px;
        font-weight: 500;
      }

      .talk {
        list-style-type: none;
        margin: 20px 0;
      }
    `}</style>
  </Page>
);