4 files changed, 118 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>
+)
diff --git a/src/view/com/util/layouts/TitleColumnLayout.tsx b/src/view/com/util/layouts/TitleColumnLayout.tsx
new file mode 100644
index 000000000..49ad9fcdb
--- /dev/null
+++ b/src/view/com/util/layouts/TitleColumnLayout.tsx
@@ -0,0 +1,69 @@
+import React from 'react'
+import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
+
+interface Props {
+  testID?: string
+  title: JSX.Element
+  horizontal: boolean
+  titleStyle?: StyleProp<ViewStyle>
+  contentStyle?: StyleProp<ViewStyle>
+}
+
+export function TitleColumnLayout({
+  testID,
+  title,
+  horizontal,
+  children,
+  titleStyle,
+  contentStyle,
+}: React.PropsWithChildren<Props>) {
+  const pal = usePalette('default')
+  const titleBg = useColorSchemeStyle(pal.viewLight, pal.view)
+  const contentBg = useColorSchemeStyle(pal.view, {
+    backgroundColor: pal.colors.background,
+    borderColor: pal.colors.border,
+    borderLeftWidth: 1,
+  })
+
+  const layoutStyles = horizontal ? styles2Column : styles1Column
+  return (
+    <View testID={testID} style={layoutStyles.container}>
+      <View style={[layoutStyles.title, titleBg, titleStyle]}>{title}</View>
+      <View style={[layoutStyles.content, contentBg, contentStyle]}>
+        {children}
+      </View>
+    </View>
+  )
+}
+
+const styles2Column = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    height: '100%',
+  },
+  title: {
+    flex: 1,
+    paddingHorizontal: 40,
+    paddingBottom: 80,
+    justifyContent: 'center',
+  },
+  content: {
+    flex: 2,
+    paddingHorizontal: 40,
+    justifyContent: 'center',
+  },
+})
+
+const styles1Column = StyleSheet.create({
+  container: {},
+  title: {
+    paddingHorizontal: 40,
+    paddingVertical: 40,
+  },
+  content: {
+    paddingHorizontal: 40,
+    paddingVertical: 40,
+  },
+})
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} />
+  }