src/view/com/util/layouts/withBreakpoints.tsx


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 {isNative} from 'platform/detection'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'

export const withBreakpoints = <P extends object>(
  Mobile: React.ComponentType<P>,
  Tablet: React.ComponentType<P>,
  Desktop: React.ComponentType<P>,
): React.FC<P> =>
  function WithBreakpoints(props: P) {
    const {isMobile, isTabletOrMobile} = useWebMediaQueries()

    if (isMobile || isNative) {
      return <Mobile {...props} />
    }
    if (isTabletOrMobile) {
      return <Tablet {...props} />
    }
    return <Desktop {...props} />
  }