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