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