mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import {View} from 'react-native'
2import {
3 FontAwesomeIcon,
4 FontAwesomeIconStyle,
5} from '@fortawesome/react-native-fontawesome'
6import {msg, Trans} from '@lingui/macro'
7import {useLingui} from '@lingui/react'
8
9import {usePalette} from '#/lib/hooks/usePalette'
10import {atoms as a, useTheme} from '#/alf'
11import {Button, ButtonIcon, ButtonText} from '#/components/Button'
12import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as ArrowRotateCounterClockwiseIcon} from '#/components/icons/ArrowRotateCounterClockwise'
13import * as Layout from '#/components/Layout'
14import {Text} from '#/components/Typography'
15
16export function ErrorScreen({
17 title,
18 message,
19 details,
20 onPressTryAgain,
21 testID,
22 showHeader,
23}: {
24 title: string
25 message: string
26 details?: string
27 onPressTryAgain?: () => void
28 testID?: string
29 showHeader?: boolean
30}) {
31 const t = useTheme()
32 const pal = usePalette('default')
33 const {_} = useLingui()
34
35 return (
36 <Layout.Center testID={testID}>
37 {showHeader && (
38 <Layout.Header.Outer>
39 <Layout.Header.BackButton />
40 <Layout.Header.Content>
41 <Layout.Header.TitleText>
42 <Trans>Error</Trans>
43 </Layout.Header.TitleText>
44 </Layout.Header.Content>
45 <Layout.Header.Slot />
46 </Layout.Header.Outer>
47 )}
48 <View style={[a.px_xl, a.py_2xl]}>
49 <View style={[a.mb_md, a.align_center]}>
50 <View
51 style={[
52 a.rounded_full,
53 {width: 50, height: 50},
54 a.align_center,
55 a.justify_center,
56 {backgroundColor: t.palette.contrast_950},
57 ]}>
58 <FontAwesomeIcon
59 icon="exclamation"
60 style={pal.textInverted as FontAwesomeIconStyle}
61 size={24}
62 />
63 </View>
64 </View>
65 <Text style={[a.text_center, a.font_heavy, a.text_2xl, a.mb_md]}>
66 {title}
67 </Text>
68 <Text style={[a.text_center, a.text_md, a.mb_xl]}>{message}</Text>
69 {details && (
70 <View
71 style={[
72 a.w_full,
73 a.border,
74 t.atoms.border_contrast_medium,
75 t.atoms.bg_contrast_25,
76 a.mb_xl,
77 a.py_sm,
78 a.px_lg,
79 a.rounded_xs,
80 a.overflow_hidden,
81 ]}>
82 <Text
83 testID={`${testID}-details`}
84 style={[a.text_center, a.text_md, t.atoms.text_contrast_high]}>
85 {details}
86 </Text>
87 </View>
88 )}
89 {onPressTryAgain && (
90 <View style={[a.align_center]}>
91 <Button
92 testID="errorScreenTryAgainButton"
93 onPress={onPressTryAgain}
94 variant="solid"
95 color="secondary_inverted"
96 size="small"
97 label={_(msg`Retry`)}
98 accessibilityHint={_(
99 msg`Retries the last action, which errored out`,
100 )}>
101 <ButtonIcon icon={ArrowRotateCounterClockwiseIcon} />
102 <ButtonText>
103 <Trans context="action">Try again</Trans>
104 </ButtonText>
105 </Button>
106 </View>
107 )}
108 </View>
109 </Layout.Center>
110 )
111}