import React, {PropTypes} from 'react';
import styled from 'styled-components';

import Tile from './tile';

const StyledGrid = styled.div`
  background-color: green;
  height: 100%;
  padding: 20px;
`;

const GridRow = styled.div`
  height: 54px;
`;

const GridCell = styled.div`
  border: 1px dotted black;
  display: inline-block;
  height: 52px;
  vertical-align: middle;
  width: 52px;
`;

export default function Grid(props) {
  const {grid} = props;
  return (
    <StyledGrid>
      {grid.map((row) => (
        <GridRow>
          {row.map((cell) => (
            <GridCell>
              {cell ?
                <Tile>
                  {cell}
                </Tile> :
                null
              }
            </GridCell>
          ))}
        </GridRow>
      ))}
    </StyledGrid>
  );
}

Grid.propTypes = {
  grid: PropTypes.array
};

@@ -286,18 +286,219 @@
 rder
-: 1px dott
+-bottom: $%7B(props) =%3E (props.borderBottom ? '1px dashed black' : 'none')%7D;%0A  border-left: 1px dashed black;%0A  border-right: $%7B(props) =%3E (props.borderRight ? '1px dashed black' : 'none')%7D;%0A  border-top: 1px dash
 ed b
@@ -699,16 +699,26 @@
 map((row
+, rowIndex
 ) =%3E (%0A 
@@ -758,16 +758,26 @@
 ap((cell
+, colIndex
 ) =%3E (%0A 
@@ -788,32 +788,159 @@
        %3CGridCell
+%0A              borderBottom=%7BrowIndex === grid.length - 1%7D%0A              borderRight=%7BcolIndex === row.length - 1%7D%0A            
 %3E%0A              

Fix styling