2 files changed, 28 insertions, 0 deletions
diff --git a/src/view/com/util/layouts/Breakpoints.tsx b/src/view/com/util/layouts/Breakpoints.tsx
new file mode 100644
index 000000000..51c3ccd5a
--- /dev/null
+++ b/src/view/com/util/layouts/Breakpoints.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+
+export const Desktop = ({}: React.PropsWithChildren<{}>) => null
+export const TabletOrDesktop = ({}: React.PropsWithChildren<{}>) => null
+export const Tablet = ({}: React.PropsWithChildren<{}>) => null
+export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) =>
+  children
+export const Mobile = ({children}: React.PropsWithChildren<{}>) => children
diff --git a/src/view/com/util/layouts/Breakpoints.web.tsx b/src/view/com/util/layouts/Breakpoints.web.tsx
new file mode 100644
index 000000000..7031a1735
--- /dev/null
+++ b/src/view/com/util/layouts/Breakpoints.web.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import MediaQuery from 'react-responsive'
+
+export const Desktop = ({children}: React.PropsWithChildren<{}>) => (
+  <MediaQuery minWidth={1224}>{children}</MediaQuery>
+)
+export const TabletOrDesktop = ({children}: React.PropsWithChildren<{}>) => (
+  <MediaQuery minWidth={800}>{children}</MediaQuery>
+)
+export const Tablet = ({children}: React.PropsWithChildren<{}>) => (
+  <MediaQuery minWidth={800} maxWidth={1224}>
+    {children}
+  </MediaQuery>
+)
+export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) => (
+  <MediaQuery maxWidth={1224}>{children}</MediaQuery>
+)
+export const Mobile = ({children}: React.PropsWithChildren<{}>) => (
+  <MediaQuery maxWidth={800}>{children}</MediaQuery>
+)