mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import React from 'react'
2import {
3 StyleSheet,
4 TouchableOpacity,
5 StyleProp,
6 View,
7 ViewStyle,
8} from 'react-native'
9import {
10 FontAwesomeIcon,
11 FontAwesomeIconStyle,
12} from '@fortawesome/react-native-fontawesome'
13import {Text} from '../text/Text'
14import {useTheme} from 'lib/ThemeContext'
15import {usePalette} from 'lib/hooks/usePalette'
16import {useLingui} from '@lingui/react'
17import {msg} from '@lingui/macro'
18
19export function ErrorMessage({
20 message,
21 numberOfLines,
22 style,
23 onPressTryAgain,
24}: {
25 message: string
26 numberOfLines?: number
27 style?: StyleProp<ViewStyle>
28 onPressTryAgain?: () => void
29}) {
30 const theme = useTheme()
31 const pal = usePalette('error')
32 const {_} = useLingui()
33 return (
34 <View testID="errorMessageView" style={[styles.outer, pal.view, style]}>
35 <View
36 style={[styles.errorIcon, {backgroundColor: theme.palette.error.icon}]}>
37 <FontAwesomeIcon
38 icon="exclamation"
39 style={pal.text as FontAwesomeIconStyle}
40 size={16}
41 />
42 </View>
43 <Text
44 type="sm-medium"
45 style={[styles.message, pal.text]}
46 numberOfLines={numberOfLines}>
47 {message}
48 </Text>
49 {onPressTryAgain && (
50 <TouchableOpacity
51 testID="errorMessageTryAgainButton"
52 style={styles.btn}
53 onPress={onPressTryAgain}
54 accessibilityRole="button"
55 accessibilityLabel={_(msg`Retry`)}
56 accessibilityHint="Retries the last action, which errored out">
57 <FontAwesomeIcon
58 icon="arrows-rotate"
59 style={{color: theme.palette.error.icon}}
60 size={18}
61 />
62 </TouchableOpacity>
63 )}
64 </View>
65 )
66}
67
68const styles = StyleSheet.create({
69 outer: {
70 flexDirection: 'row',
71 alignItems: 'center',
72 paddingVertical: 8,
73 paddingHorizontal: 8,
74 },
75 errorIcon: {
76 borderRadius: 12,
77 width: 24,
78 height: 24,
79 alignItems: 'center',
80 justifyContent: 'center',
81 marginRight: 8,
82 },
83 message: {
84 flex: 1,
85 paddingRight: 10,
86 },
87 btn: {
88 paddingHorizontal: 4,
89 paddingVertical: 4,
90 },
91})