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