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 && <ViewHeader title="Error" showBorder />}
40 <CenteredView testID={testID} style={[styles.outer, pal.view]}>
41 <View style={styles.errorIconContainer}>
42 <View
43 style={[
44 styles.errorIcon,
45 {backgroundColor: theme.palette.inverted.background},
46 ]}>
47 <FontAwesomeIcon
48 icon="exclamation"
49 style={pal.textInverted as FontAwesomeIconStyle}
50 size={24}
51 />
52 </View>
53 </View>
54 <Text type="title-lg" style={[styles.title, pal.text]}>
55 {title}
56 </Text>
57 <Text style={[styles.message, pal.text]}>{message}</Text>
58 {details && (
59 <Text
60 testID={`${testID}-details`}
61 style={[styles.details, pal.text, pal.viewLight]}>
62 {details}
63 </Text>
64 )}
65 {onPressTryAgain && (
66 <View style={styles.btnContainer}>
67 <Button
68 testID="errorScreenTryAgainButton"
69 type="default"
70 style={[styles.btn]}
71 onPress={onPressTryAgain}
72 accessibilityLabel={_(msg`Retry`)}
73 accessibilityHint={_(
74 msg`Retries the last action, which errored out`,
75 )}>
76 <FontAwesomeIcon
77 icon="arrows-rotate"
78 style={pal.link as FontAwesomeIconStyle}
79 size={16}
80 />
81 <Text type="button" style={[styles.btnText, pal.link]}>
82 <Trans context="action">Try again</Trans>
83 </Text>
84 </Button>
85 </View>
86 )}
87 </CenteredView>
88 </>
89 )
90}
91
92const styles = StyleSheet.create({
93 outer: {
94 flex: 1,
95 paddingVertical: 30,
96 paddingHorizontal: 14,
97 },
98 title: {
99 textAlign: 'center',
100 marginBottom: 10,
101 },
102 message: {
103 textAlign: 'center',
104 marginBottom: 20,
105 },
106 details: {
107 textAlign: 'center',
108 paddingVertical: 10,
109 paddingHorizontal: 14,
110 overflow: 'hidden',
111 marginBottom: 20,
112 },
113 btnContainer: {
114 alignItems: 'center',
115 },
116 btn: {
117 flexDirection: 'row',
118 alignItems: 'center',
119 paddingHorizontal: 16,
120 paddingVertical: 10,
121 },
122 btnText: {
123 marginLeft: 5,
124 },
125 errorIconContainer: {
126 alignItems: 'center',
127 marginBottom: 10,
128 },
129 errorIcon: {
130 borderRadius: 25,
131 width: 50,
132 height: 50,
133 alignItems: 'center',
134 justifyContent: 'center',
135 },
136})