import { WIDTH } from './Layout/sizes' ; export enum QueryKeys { DESKTOP = 'desktop' , DESKTOP_XL = 'desktopXL' , MOBILE = 'mobile' , MOBILE_DOWN = 'mobileDown' , MOBILE_UP = 'mobileUp' , TABLET = 'tablet' , TABLET_DOWN = 'tabletDown' , TABLET_UP = 'tabletUp' } export type QueryMap = Record < QueryKeys , string > ; export const QUERY = { [ QueryKeys . DESKTOP ] : `min-width: ${ WIDTH . DESKTOP_MIN }px` , [ QueryKeys . DESKTOP_XL ] : `min-width: ${ WIDTH . DESKTOP_XL_MIN }px` , [ QueryKeys . MOBILE ] : `max-width: ${ WIDTH . MOBILE_MAX }px` , [ QueryKeys . MOBILE_DOWN ] : `max-width: ${ WIDTH . MOBILE_MAX }px` , [ QueryKeys . MOBILE_UP ] : `min-width: ${ WIDTH . MOBILE }px` , [ QueryKeys . TABLET ] : `min-width: ${ WIDTH . TABLET_MIN }px) and (max-width: ${ WIDTH . TABLET_MAX }px` , [ QueryKeys . TABLET_DOWN ] : `max-width: ${ WIDTH . TABLET_MAX }px` , [ QueryKeys . TABLET_UP ] : `min-width: ${ WIDTH . TABLET_MIN }px` , } ; export const media = Object . entries ( QUERY ) . reduce < QueryMap | { } > ( ( accumulator , [ key , value ] ) => ( { ... accumulator , [ key ] : `@media (${ value })` } ) , { } ) ;