import { createTheme } from '@material-ui/core/styles' ; import * as React from 'react' ; import Responsive from 'react-responsive' ; import { css } from 'styled-components' ; export const theme = createTheme ( { palette : { } , } ) ; export const Desktop = ( props ) => < Responsive { ... props } minWidth = { 992 } / > ; export const Tablet = ( props ) => ( < Responsive { ... props } minWidth = { 768 } maxWidth = { 991 } / > ) ; export const Mobile = ( props ) => < Responsive { ... props } maxWidth = { 767 } / > ; export const Default = ( props ) => < Responsive { ... props } minWidth = { 768 } / > ; export const mediaQuerySizes = { giant : 1170 , desktop : 992 , tablet : 768 , phone : 500 , } ; interface MediaTypes { [ key ] : any ; giant : ( tString : TemplateStringsArray ) => TemplateStringsArray ; desktop : ( tString : TemplateStringsArray ) => TemplateStringsArray ; tablet : ( tString : TemplateStringsArray ) => TemplateStringsArray ; phone : ( tString : TemplateStringsArray ) => TemplateStringsArray ; } export const media = Object . keys ( mediaQuerySizes ) . reduce < MediaTypes > ( ( accumulator , label ) => { const emSize = mediaQuerySizes [ label ] / 16 ; accumulator [ label ] = ( ... args ) => css `
      @media (max-width: ${ emSize }em) {
        ${ css ( { ... args } ) };
      }
    ` ; return accumulator ; } , { giant : ( str ) => str , desktop : ( str ) => str , tablet : ( str ) => str , phone : ( str ) => str , } ) ;