Eric Bailey
73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
import React from 'react'
|
|
import {View} from 'react-native'
|
|
import {Trans, msg} from '@lingui/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
import {useNavigation} from '@react-navigation/native'
|
|
|
|
import {useTheme, atoms as a} from '#/alf'
|
|
import {Text} from '#/components/Typography'
|
|
import {Button, ButtonText} from '#/components/Button'
|
|
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
|
|
import {NavigationProp} from '#/lib/routes/types'
|
|
|
|
export function ErrorState({error}: {error: string}) {
|
|
const t = useTheme()
|
|
const {_} = useLingui()
|
|
const navigation = useNavigation<NavigationProp>()
|
|
|
|
const onPressBack = React.useCallback(() => {
|
|
if (navigation.canGoBack()) {
|
|
navigation.goBack()
|
|
} else {
|
|
navigation.navigate('Home')
|
|
}
|
|
}, [navigation])
|
|
|
|
return (
|
|
<View style={[a.px_xl]}>
|
|
<CircleInfo width={48} style={[t.atoms.text_contrast_low]} />
|
|
|
|
<Text style={[a.text_xl, a.font_bold, a.pb_md, a.pt_xl]}>
|
|
<Trans>Hmmmm, we couldn't load that moderation service.</Trans>
|
|
</Text>
|
|
<Text
|
|
style={[
|
|
a.text_md,
|
|
a.leading_normal,
|
|
a.pb_md,
|
|
t.atoms.text_contrast_medium,
|
|
]}>
|
|
<Trans>
|
|
This moderation service is unavailable. See below for more details. If
|
|
this issue persists, contact us.
|
|
</Trans>
|
|
</Text>
|
|
<View
|
|
style={[
|
|
a.relative,
|
|
a.py_md,
|
|
a.px_lg,
|
|
a.rounded_md,
|
|
a.mb_2xl,
|
|
t.atoms.bg_contrast_25,
|
|
]}>
|
|
<Text style={[a.text_md, a.leading_normal]}>{error}</Text>
|
|
</View>
|
|
|
|
<View style={{flexDirection: 'row'}}>
|
|
<Button
|
|
size="small"
|
|
color="secondary"
|
|
variant="solid"
|
|
label={_(msg`Go Back`)}
|
|
accessibilityHint="Return to previous page"
|
|
onPress={onPressBack}>
|
|
<ButtonText>
|
|
<Trans>Go Back</Trans>
|
|
</ButtonText>
|
|
</Button>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|