From ab134cac93f488005febdc3b6e86fdbd85589fd0 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Tue, 1 Nov 2022 11:06:43 -0500
Subject: Add consistent view headers

---
 src/view/com/util/ViewHeader.tsx | 77 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 src/view/com/util/ViewHeader.tsx

(limited to 'src/view/com/util/ViewHeader.tsx')

diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
new file mode 100644
index 000000000..46be1144f
--- /dev/null
+++ b/src/view/com/util/ViewHeader.tsx
@@ -0,0 +1,77 @@
+import React from 'react'
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {s, colors} from '../../lib/styles'
+import {useStores} from '../../../state'
+
+export function ViewHeader({
+  title,
+  subtitle,
+}: {
+  title: string
+  subtitle?: string
+}) {
+  const store = useStores()
+  const onPressBack = () => {
+    store.nav.tab.goBack()
+  }
+  return (
+    <View style={styles.header}>
+      {store.nav.tab.canGoBack ? (
+        <TouchableOpacity onPress={onPressBack}>
+          <FontAwesomeIcon
+            size={14}
+            icon="angle-left"
+            style={styles.backIcon}
+          />
+        </TouchableOpacity>
+      ) : (
+        <View style={styles.cornerPlaceholder} />
+      )}
+      <View style={styles.titleContainer}>
+        <Text style={styles.title}>{title}</Text>
+        {subtitle ? (
+          <Text style={styles.subtitle} numberOfLines={1}>
+            {subtitle}
+          </Text>
+        ) : undefined}
+      </View>
+      <View style={styles.cornerPlaceholder} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: colors.white,
+    paddingHorizontal: 12,
+    paddingBottom: 6,
+    borderBottomColor: colors.gray1,
+    borderBottomWidth: 1,
+  },
+
+  titleContainer: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  subtitle: {
+    fontSize: 15,
+    marginLeft: 3,
+    color: colors.gray4,
+    maxWidth: 200,
+  },
+
+  cornerPlaceholder: {
+    width: 14,
+    height: 14,
+  },
+  backIcon: {width: 14, height: 14},
+})
-- 
cgit 1.4.1