Replace `||` operators and conditional checks with `??` where appropriate for safer null/undefined handling. Nullish coalescing only triggers for null/undefined values, preventing unexpected behavior with falsy values like 0 or empty strings.
29 lines
677 B
TypeScript
29 lines
677 B
TypeScript
import { CenteredContent } from '@/layout/CenteredContent'
|
|
import { Screen } from '@/layout/Screen'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { Center } from '@/styled-system/jsx'
|
|
import { Text } from '@/primitives'
|
|
|
|
export const ErrorScreen = ({
|
|
title,
|
|
body,
|
|
}: {
|
|
title?: string
|
|
body?: string
|
|
}) => {
|
|
const { t } = useTranslation()
|
|
return (
|
|
<Screen layout="centered">
|
|
<CenteredContent title={title ?? t('error.heading')} withBackButton>
|
|
{!!body && (
|
|
<Center>
|
|
<Text as="p" variant="h3" centered>
|
|
{body}
|
|
</Text>
|
|
</Center>
|
|
)}
|
|
</CenteredContent>
|
|
</Screen>
|
|
)
|
|
}
|