1 files changed, 133 insertions, 0 deletions
diff --git a/src/view/com/util/Html.tsx b/src/view/com/util/Html.tsx
new file mode 100644
index 000000000..245952e40
--- /dev/null
+++ b/src/view/com/util/Html.tsx
@@ -0,0 +1,133 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {usePalette} from 'lib/hooks/usePalette'
+import {Text} from './text/Text'
+import {TextLink} from './Link'
+
+/**
+ * These utilities are used to define long documents in an html-like
+ * DSL. See for instance /locale/en/privacy-policy.tsx
+ */
+
+export function H1({children}: React.PropsWithChildren<{}>) {
+  const pal = usePalette('default')
+  return (
+    <Text type="title-xl" style={[pal.text, styles.h1]}>
+      {children}
+    </Text>
+  )
+}
+
+export function H2({children}: React.PropsWithChildren<{}>) {
+  const pal = usePalette('default')
+  return (
+    <Text type="title-lg" style={[pal.text, styles.h2]}>
+      {children}
+    </Text>
+  )
+}
+
+export function H3({children}: React.PropsWithChildren<{}>) {
+  const pal = usePalette('default')
+  return (
+    <Text type="title" style={[pal.text, styles.h3]}>
+      {children}
+    </Text>
+  )
+}
+
+export function H4({children}: React.PropsWithChildren<{}>) {
+  const pal = usePalette('default')
+  return (
+    <Text type="title-sm" style={[pal.text, styles.h4]}>
+      {children}
+    </Text>
+  )
+}
+
+export function P({children}: React.PropsWithChildren<{}>) {
+  const pal = usePalette('default')
+  return (
+    <Text type="md" style={[pal.text, styles.p]}>
+      {children}
+    </Text>
+  )
+}
+
+export function UL({children}: React.PropsWithChildren<{}>) {
+  return <View style={styles.ul}>{children}</View>
+}
+
+export function OL({children}: React.PropsWithChildren<{}>) {
+  return <View style={styles.ol}>{children}</View>
+}
+
+export function LI({
+  children,
+  value,
+}: React.PropsWithChildren<{value?: string}>) {
+  const pal = usePalette('default')
+  return (
+    <View style={styles.li}>
+      <Text style={[pal.text, styles.liBullet]}>{value || <>&bull;</>}</Text>
+      <Text type="md" style={[pal.text, styles.liText]}>
+        {children}
+      </Text>
+    </View>
+  )
+}
+
+export function A({children, href}: React.PropsWithChildren<{href: string}>) {
+  const pal = usePalette('default')
+  return (
+    <TextLink
+      type="md"
+      style={[pal.link, styles.a]}
+      text={children}
+      href={href}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  h1: {
+    marginTop: 20,
+    marginBottom: 10,
+    letterSpacing: 0.8,
+  },
+  h2: {
+    marginTop: 20,
+    marginBottom: 10,
+    letterSpacing: 0.8,
+  },
+  h3: {
+    marginBottom: 10,
+  },
+  h4: {
+    marginBottom: 10,
+    fontWeight: 'bold',
+  },
+  p: {
+    marginBottom: 10,
+  },
+  ul: {
+    marginBottom: 10,
+    paddingLeft: 18,
+  },
+  ol: {
+    marginBottom: 10,
+    paddingLeft: 18,
+  },
+  li: {
+    flexDirection: 'row',
+    paddingRight: 10,
+    marginBottom: 10,
+  },
+  liBullet: {
+    paddingRight: 10,
+  },
+  liText: {},
+  a: {
+    marginBottom: 10,
+  },
+})