import * as React from 'react' ; import styled from 'styled-components' ; import { IDataProps , DataRow } from './DataRow' ; const Container = styled . div `
  margin-top: 48px;
` ; const Title = styled . div `
  ${ ( { theme } ) => theme . fonts . h4Style };
  margin-bottom: 16px;
  @media (max-width: ${ ( { theme } ) => theme . grid . breakpoints . md }px) {
    ${ ( { theme } ) => theme . fonts . h5Style };
  }
` ; const ResponsiveContainer = styled . div `
  display: none;
  @media (max-width: ${ ( { theme } ) => theme . grid . breakpoints . lg }px) {
    display: block;
  }
` ; interface IProps { id ? : string ; title : string ; items : IDataProps [ ] ; responsiveContents ? : React . ReactNode ; } export class DataSection extends React . Component < IProps > { render ( ) { const { id , title , items , responsiveContents } = this . props ; return ( < Container id = { id } > < Title > { title } < /Title> { responsiveContents && ( < ResponsiveContainer > { responsiveContents } < /ResponsiveContainer>)} { items . map ( ( item , index ) => ( < DataRow id = { item . label . split ( ' ' ) . join ( '-' ) } key = { index } { ... item } / > ) ) } < /Container>); } }