about summary refs log tree commit diff
path: root/src/view/com/util/layouts/Breakpoints.web.tsx
blob: 7031a1735895c10fea0847646081df6d18303070 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from 'react'
import MediaQuery from 'react-responsive'

export const Desktop = ({children}: React.PropsWithChildren<{}>) => (
  <MediaQuery minWidth={1224}>{children}</MediaQuery>
)
export const TabletOrDesktop = ({children}: React.PropsWithChildren<{}>) => (
  <MediaQuery minWidth={800}>{children}</MediaQuery>
)
export const Tablet = ({children}: React.PropsWithChildren<{}>) => (
  <MediaQuery minWidth={800} maxWidth={1224}>
    {children}
  </MediaQuery>
)
export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) => (
  <MediaQuery maxWidth={1224}>{children}</MediaQuery>
)
export const Mobile = ({children}: React.PropsWithChildren<{}>) => (
  <MediaQuery maxWidth={800}>{children}</MediaQuery>
)