Fix onboarding on mobile web

This commit is contained in:
Paul Frazee 2023-08-30 14:57:03 -07:00
parent cd8ae1298e
commit 05d1d8d8a4
7 changed files with 260 additions and 214 deletions

View file

@ -0,0 +1,22 @@
import React from 'react'
import {useMediaQuery} from 'react-responsive'
import {isNative} from 'platform/detection'
export const withBreakpoints =
<P extends object>(
Mobile: React.ComponentType<P>,
Tablet: React.ComponentType<P>,
Desktop: React.ComponentType<P>,
): React.FC<P> =>
(props: P) => {
const isTabletOrMobile = useMediaQuery({query: '(max-width: 1224px)'})
const isMobile = useMediaQuery({query: '(max-width: 800px)'})
if (isMobile || isNative) {
return <Mobile {...props} />
}
if (isTabletOrMobile) {
return <Tablet {...props} />
}
return <Desktop {...props} />
}