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