Fix onboarding on mobile web
This commit is contained in:
parent
cd8ae1298e
commit
05d1d8d8a4
7 changed files with 260 additions and 214 deletions
22
src/view/com/util/layouts/withBreakpoints.tsx
Normal file
22
src/view/com/util/layouts/withBreakpoints.tsx
Normal 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} />
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue