Fix onboarding on mobile web

1 files changed, 22 insertions, 0 deletions

diff --git a/src/view/com/util/layouts/withBreakpoints.tsx b/src/view/com/util/layouts/withBreakpoints.tsx
new file mode 100644
index 000000000..4214c1040
--- /dev/null
+++ b/src/view/com/util/layouts/withBreakpoints.tsx
@@ -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} />
+  }