An ATproto social media client -- with an independent Appview.
quilling.dev
1import {
2 type StyleProp,
3 StyleSheet,
4 TouchableOpacity,
5 View,
6 type ViewStyle,
7} from 'react-native'
8import {
9 FontAwesomeIcon,
10 type FontAwesomeIconStyle,
11} from '@fortawesome/react-native-fontawesome'
12import {msg} from '@lingui/macro'
13import {useLingui} from '@lingui/react'
14
15import {useTheme} from '#/alf'
16import * as Layout from '#/components/Layout'
17import {Text} from '../text/Text'
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 {_} = useLingui()
32 return (
33 <Layout.Center>
34 <View
35 testID="errorMessageView"
36 style={[
37 styles.outer,
38 {backgroundColor: theme.palette.negative_300},
39 style,
40 ]}>
41 <View
42 style={[
43 styles.errorIcon,
44 {backgroundColor: theme.palette.negative_400},
45 ]}>
46 <FontAwesomeIcon
47 icon="exclamation"
48 style={{color: theme.palette.negative_400} as FontAwesomeIconStyle}
49 size={16}
50 />
51 </View>
52 <Text
53 type="sm-medium"
54 style={[styles.message, {color: theme.palette.white}]}
55 numberOfLines={numberOfLines}>
56 {message}
57 </Text>
58 {onPressTryAgain && (
59 <TouchableOpacity
60 testID="errorMessageTryAgainButton"
61 style={styles.btn}
62 onPress={onPressTryAgain}
63 accessibilityRole="button"
64 accessibilityLabel={_(msg`Retry`)}
65 accessibilityHint={_(
66 msg`Retries the last action, which errored out`,
67 )}>
68 <FontAwesomeIcon
69 icon="arrows-rotate"
70 style={{color: theme.palette.negative_400}}
71 size={18}
72 />
73 </TouchableOpacity>
74 )}
75 </View>
76 </Layout.Center>
77 )
78}
79
80const styles = StyleSheet.create({
81 outer: {
82 flexDirection: 'row',
83 alignItems: 'center',
84 paddingVertical: 8,
85 paddingHorizontal: 8,
86 },
87 errorIcon: {
88 borderRadius: 12,
89 width: 24,
90 height: 24,
91 alignItems: 'center',
92 justifyContent: 'center',
93 marginRight: 8,
94 },
95 message: {
96 flex: 1,
97 paddingRight: 10,
98 },
99 btn: {
100 paddingHorizontal: 4,
101 paddingVertical: 4,
102 },
103})