mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import React from 'react'
2import {StyleSheet, View} from 'react-native'
3import {
4 FontAwesomeIcon,
5 FontAwesomeIconStyle,
6} from '@fortawesome/react-native-fontawesome'
7import {Text} from '../text/Text'
8import {useTheme} from 'lib/ThemeContext'
9import {usePalette} from 'lib/hooks/usePalette'
10import {Button} from '../forms/Button'
11import {CenteredView} from '../Views'
12
13export function ErrorScreen({
14 title,
15 message,
16 details,
17 onPressTryAgain,
18 testID,
19}: {
20 title: string
21 message: string
22 details?: string
23 onPressTryAgain?: () => void
24 testID?: string
25}) {
26 const theme = useTheme()
27 const pal = usePalette('default')
28 return (
29 <CenteredView testID={testID} style={[styles.outer, pal.view]}>
30 <View style={styles.errorIconContainer}>
31 <View
32 style={[
33 styles.errorIcon,
34 {backgroundColor: theme.palette.inverted.background},
35 ]}>
36 <FontAwesomeIcon
37 icon="exclamation"
38 style={pal.textInverted as FontAwesomeIconStyle}
39 size={24}
40 />
41 </View>
42 </View>
43 <Text type="title-lg" style={[styles.title, pal.text]}>
44 {title}
45 </Text>
46 <Text style={[styles.message, pal.text]}>{message}</Text>
47 {details && (
48 <Text
49 testID={`${testID}-details`}
50 style={[styles.details, pal.text, pal.viewLight]}>
51 {details}
52 </Text>
53 )}
54 {onPressTryAgain && (
55 <View style={styles.btnContainer}>
56 <Button
57 testID="errorScreenTryAgainButton"
58 type="default"
59 style={[styles.btn]}
60 onPress={onPressTryAgain}
61 accessibilityLabel="Retry"
62 accessibilityHint="Retries the last action, which errored out">
63 <FontAwesomeIcon
64 icon="arrows-rotate"
65 style={pal.link as FontAwesomeIconStyle}
66 size={16}
67 />
68 <Text type="button" style={[styles.btnText, pal.link]}>
69 Try again
70 </Text>
71 </Button>
72 </View>
73 )}
74 </CenteredView>
75 )
76}
77
78const styles = StyleSheet.create({
79 outer: {
80 flex: 1,
81 paddingVertical: 30,
82 paddingHorizontal: 14,
83 },
84 title: {
85 textAlign: 'center',
86 marginBottom: 10,
87 },
88 message: {
89 textAlign: 'center',
90 marginBottom: 20,
91 },
92 details: {
93 textAlign: 'center',
94 paddingVertical: 10,
95 paddingHorizontal: 14,
96 overflow: 'hidden',
97 marginBottom: 20,
98 },
99 btnContainer: {
100 alignItems: 'center',
101 },
102 btn: {
103 flexDirection: 'row',
104 alignItems: 'center',
105 paddingHorizontal: 16,
106 paddingVertical: 10,
107 },
108 btnText: {
109 marginLeft: 5,
110 },
111 errorIconContainer: {
112 alignItems: 'center',
113 marginBottom: 10,
114 },
115 errorIcon: {
116 borderRadius: 25,
117 width: 50,
118 height: 50,
119 alignItems: 'center',
120 justifyContent: 'center',
121 },
122})