mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import React from 'react'
2import {View} from 'react-native'
3import {msg, Trans} from '@lingui/macro'
4import {useLingui} from '@lingui/react'
5
6import {useGoBack} from 'lib/hooks/useGoBack'
7import {CenteredView} from 'view/com/util/Views'
8import {atoms as a, useBreakpoints, useTheme} from '#/alf'
9import {Button, ButtonText} from '#/components/Button'
10import {Text} from '#/components/Typography'
11
12export function Error({
13 title,
14 message,
15 onRetry,
16 onGoBack,
17 hideBackButton,
18 sideBorders = true,
19}: {
20 title?: string
21 message?: string
22 onRetry?: () => unknown
23 onGoBack?: () => unknown
24 hideBackButton?: boolean
25 sideBorders?: boolean
26}) {
27 const {_} = useLingui()
28 const t = useTheme()
29 const {gtMobile} = useBreakpoints()
30 const goBack = useGoBack(onGoBack)
31
32 return (
33 <CenteredView
34 style={[
35 a.flex_1,
36 a.align_center,
37 a.gap_5xl,
38 !gtMobile && a.justify_between,
39 t.atoms.border_contrast_low,
40 {paddingTop: 175, paddingBottom: 110},
41 ]}
42 sideBorders={sideBorders}>
43 <View style={[a.w_full, a.align_center, a.gap_lg]}>
44 <Text style={[a.font_bold, a.text_3xl]}>{title}</Text>
45 <Text
46 style={[
47 a.text_md,
48 a.text_center,
49 t.atoms.text_contrast_high,
50 {lineHeight: 1.4},
51 gtMobile ? {width: 450} : [a.w_full, a.px_lg],
52 ]}>
53 {message}
54 </Text>
55 </View>
56 <View style={[a.gap_md, gtMobile ? {width: 350} : [a.w_full, a.px_lg]]}>
57 {onRetry && (
58 <Button
59 variant="solid"
60 color="primary"
61 label={_(msg`Press to retry`)}
62 onPress={onRetry}
63 size="large"
64 style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}>
65 <ButtonText>
66 <Trans>Retry</Trans>
67 </ButtonText>
68 </Button>
69 )}
70 {!hideBackButton && (
71 <Button
72 variant="solid"
73 color={onRetry ? 'secondary' : 'primary'}
74 label={_(msg`Return to previous page`)}
75 onPress={goBack}
76 size="large"
77 style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}>
78 <ButtonText>
79 <Trans>Go Back</Trans>
80 </ButtonText>
81 </Button>
82 )}
83 </View>
84 </CenteredView>
85 )
86}