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