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