use media query in styled components ( DRY )

mediaQuery.ts

const mediaQuery = (key: keyof typeof screens) => {
  return (style: TemplateStringsArray | String) => `@media (max-width: ${screens[key]}px) { ${style} }`;
};

sreens.ts

export default {
  wideDesktop: 1920,
  desktop: 1280,
  smallDesktop: 1024,
  largeTablet: 768,
  largeHandset: 480,
  mediumHandset: 360,
  smallHandset: 320,
};

styled.ts

import styled from 'styled-components';
import mediaQuery from './mediaQuery';

export const Container = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;

  ${mediaQuery('smallDesktop')`
      display: flex;
      flex-direction:column;
      justify-content: center;
      align-items: center;
  `}

`