1 files changed, 21 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..dc3f50dc9
--- /dev/null
+++ b/src/view/com/util/layouts/withBreakpoints.tsx
@@ -0,0 +1,21 @@
+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> =>
+  (props: P) => {
+    const {isMobile, isTabletOrMobile} = useWebMediaQueries()
+
+    if (isMobile || isNative) {
+      return <Mobile {...props} />
+    }
+    if (isTabletOrMobile) {
+      return <Tablet {...props} />
+    }
+    return <Desktop {...props} />
+  }