Rework profile page to include working view selector

src/view/com/util/ErrorMessage.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {colors} from '../../lib/styles'
+
+export function ErrorMessage({
+  message,
+  onPressTryAgain,
+}: {
+  message: string
+  onPressTryAgain?: () => void
+}) {
+  return (
+    <View style={styles.outer}>
+      <View style={styles.errorIcon}>
+        <FontAwesomeIcon
+          icon="exclamation"
+          style={{color: colors.white}}
+          size={16}
+        />
+      </View>
+      <Text style={styles.message}>{message}</Text>
+      {onPressTryAgain && (
+        <TouchableOpacity style={styles.btn} onPress={onPressTryAgain}>
+          <FontAwesomeIcon
+            icon="arrows-rotate"
+            style={{color: colors.red4}}
+            size={16}
+          />
+        </TouchableOpacity>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  outer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: colors.red1,
+    borderWidth: 1,
+    borderColor: colors.red3,
+    borderRadius: 6,
+    paddingVertical: 8,
+    paddingHorizontal: 8,
+  },
+  errorIcon: {
+    backgroundColor: colors.red4,
+    borderRadius: 12,
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 8,
+  },
+  message: {
+    flex: 1,
+    color: colors.red4,
+    paddingRight: 10,
+  },
+  btn: {
+    paddingHorizontal: 4,
+    paddingVertical: 4,
+  },
+})

src/view/com/util/ErrorScreen.tsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {colors} from '../../lib/styles'
+
+export function ErrorScreen({
+  title,
+  message,
+  details,
+  onPressTryAgain,
+}: {
+  title: string
+  message: string
+  details?: string
+  onPressTryAgain?: () => void
+}) {
+  return (
+    <View style={styles.outer}>
+      <View style={styles.errorIconContainer}>
+        <View style={styles.errorIcon}>
+          <FontAwesomeIcon
+            icon="exclamation"
+            style={{color: colors.white}}
+            size={24}
+          />
+        </View>
+      </View>
+      <Text style={styles.title}>{title}</Text>
+      <Text style={styles.message}>{message}</Text>
+      {details && <Text style={styles.details}>{details}</Text>}
+      {onPressTryAgain && (
+        <View style={styles.btnContainer}>
+          <TouchableOpacity style={styles.btn} onPress={onPressTryAgain}>
+            <FontAwesomeIcon
+              icon="arrows-rotate"
+              style={{color: colors.white}}
+              size={16}
+            />
+            <Text style={styles.btnText}>Try again</Text>
+          </TouchableOpacity>
+        </View>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  outer: {
+    flex: 1,
+    backgroundColor: colors.red1,
+    borderWidth: 1,
+    borderColor: colors.red3,
+    borderRadius: 6,
+    paddingVertical: 30,
+    paddingHorizontal: 14,
+    margin: 10,
+  },
+  title: {
+    textAlign: 'center',
+    color: colors.red4,
+    fontSize: 24,
+    marginBottom: 10,
+  },
+  message: {
+    textAlign: 'center',
+    color: colors.red4,
+    marginBottom: 20,
+  },
+  details: {
+    textAlign: 'center',
+    color: colors.black,
+    backgroundColor: colors.white,
+    borderWidth: 1,
+    borderColor: colors.gray5,
+    borderRadius: 6,
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    overflow: 'hidden',
+    marginBottom: 20,
+  },
+  btnContainer: {
+    alignItems: 'center',
+  },
+  btn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: colors.red4,
+    borderRadius: 6,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+  },
+  btnText: {
+    marginLeft: 5,
+    color: colors.white,
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  errorIconContainer: {
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  errorIcon: {
+    backgroundColor: colors.red4,
+    borderRadius: 30,
+    width: 50,
+    height: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 5,
+  },
+})

src/view/com/util/Selector.tsx

@@ -9,17 +9,13 @@ import {
 } from 'react-native'
 import {colors} from '../../lib/styles'
 
-export interface SelectorItem {
-  label: string
-}
-
 export function Selector({
   style,
   items,
   onSelect,
 }: {
   style?: StyleProp<ViewStyle>
-  items: SelectorItem[]
+  items: string[]
   onSelect?: (index: number) => void
 }) {
   const [selectedIndex, setSelectedIndex] = useState<number>(0)
@@ -36,7 +32,7 @@ export function Selector({
           <TouchableWithoutFeedback key={i} onPress={() => onPressItem(i)}>
             <View style={selected ? styles.itemSelected : styles.item}>
               <Text style={selected ? styles.labelSelected : styles.label}>
-                {item.label}
+                {item}
               </Text>
             </View>
           </TouchableWithoutFeedback>