✨(frontend) allow customization of error title and description

Enhanced the error screen to support customizable titles and descriptions.

Allows for more detailed and informative error messages for users.
By default, the error screen displays a standard heading. You can
now pass custom title and body content to provide additional context
and clarity.

src/frontend/src/components/ErrorScreen.tsx

@@ -1,12 +1,25 @@
 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 = () => {
+export const ErrorScreen = ({ title, body }: {
+  title?: string
+  body?: string
+}) => {
   const { t } = useTranslation()
   return (
     <Screen layout="centered">
-      <CenteredContent title={t('error.heading')} withBackButton />
+      <CenteredContent title={title || t('error.heading')} withBackButton>
+        {!!body && (
+          <Center>
+            <Text as="p" variant="h3">
+              {body}
+            </Text>
+          </Center>
+        )}
+      </CenteredContent>
     </Screen>
   )
 }