import m from 'mithril';
import { Col, Grid, Table, Breakpoints } from '@/';
import { Example } from '@shared/examples';

const EXAMPLE_SRC = 'components/grid/examples/responsive.ts';
const breakpoints = Object.keys(Breakpoints);

export class GridResponsiveExample {
  public view() {
    return [
      m(Example, { class: 'cui-example-grid', center: false, src: EXAMPLE_SRC }, [
        m(Grid, { gutter: { xs: 0, sm: 10, md: 20, lg: 30, xl: 40 } }, [
          m(Col, { span: { xs: 12, md: 4 } }, m('.cui-example-grid-col', 'col')),
          m(Col, { span: { xs: 12, md: 4 } }, m('.cui-example-grid-col', 'col')),
          m(Col, { span: { xs: 12, md: 4 } }, m('.cui-example-grid-col', 'col'))
        ])
      ]),

      m(Table, [
        m('tr', [
          m('th', 'Size'),
          m('th', 'Description')
        ]),
        breakpoints.map(breakpoint => m('tr', [
          m('td', m('code', breakpoint)),
          m('td', Breakpoints[breakpoint])
        ]))
      ])
    ];
  }
}