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

import { Breadcrumbs, Crumb } from '../components/breadcrumbs';
import PostLink from '../components/post-link';

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

export default () => (
  <Page pageTitle="talks">
    <Header />
    <Container>
      <Breadcrumbs>
        <Crumb title="Home" href="/" />
        <Crumb title="Talks" href="/talks" last />
      </Breadcrumbs>
      <Section title="Talks">
        <ul>
          {
            talks.map(talk => (
              <li key={ talk.id } className="talk">
                <PostLink href={ talk.file }
                  date={ talk.date }
                  lang={ talk.lang }
                  download
                  filename={ talk.filename }>
                  { talk.title }
                </PostLink>
              </li>
            ))
          }
        </ul>
      </Section>
    </Container>

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