styled-components media queries

Container.js

/*
 * source: https://react-brasil.slack.com/archives/C1EDVPBQC/p1571423188462000?thread_ts=1571421080.458800&cid=C1EDVPBQC
 * author: João Paulo Siqueira Lins
 */

import styled from "styled-components"

import MediaPoint from "./MediaPoint"

const Container = styled.div`
  display: flex;
  justify-content: space-between;
  flex-direction: column;

  ${MediaPoint.Tablet} {
    flex-direction: row;
  }
`;

MediaPoint.js

/*
 * source: https://react-brasil.slack.com/archives/C1EDVPBQC/p1571423188462000?thread_ts=1571421080.458800&cid=C1EDVPBQC
 * author: João Paulo Siqueira Lins
 */

const MobileLg = '@media (min-width: 414px)';
const Tablet = '@media (min-width: 768px)';
const DesktopSm = '@media (min-width: 1024px)';
const DesktopLg = '@media (min-width: 1366px)'; // Matches 1366 and 1440 resolutions
const DesktopXl = '@media (min-width: 1650px)';

const MediaPoint = {
  MobileOnly,
  MobileLg,
  Tablet,
  DesktopSm,
  DesktopLg,
  DesktopXl
};

export default MediaPoint;