diff --git a/src/frontend/apps/impress/src/components/ErrorPage.tsx b/src/frontend/apps/impress/src/components/ErrorPage.tsx index baf380345..b9fe8e466 100644 --- a/src/frontend/apps/impress/src/components/ErrorPage.tsx +++ b/src/frontend/apps/impress/src/components/ErrorPage.tsx @@ -1,20 +1,58 @@ -import { Button } from '@gouvfr-lasuite/cunningham-react'; import Head from 'next/head'; -import Image, { StaticImageData } from 'next/image'; +import Link from 'next/link'; +import { ComponentType, ReactNode, SVGProps } from 'react'; import { useTranslation } from 'react-i18next'; import styled from 'styled-components'; -import { Box, Icon, StyledLink, Text } from '@/components'; +import { Box, Icon, Text } from '@/components'; +import HomeSvg from '@/icons/house-rounded.svg'; -const StyledButton = styled(Button)` - width: fit-content; +const errorActionStyles = ` + display: flex; + height: var(--md, 24px); + padding: 0 var(--xxxs, 4px); + justify-content: center; + align-items: center; + gap: var(--xxxs, 4px); + color: var(--c--contextuals--content--semantic--neutral--tertiary); + background: none; + border: none; + cursor: pointer; + font-family: inherit; + font-size: 12px; + font-weight: 400; + line-height: var(--line-height-xs, 16px); + text-decoration: none; + + svg { + text-decoration: none; + } + + .--docs--error-action-label { + text-decoration: none; + } + + &:hover:not(:disabled) .--docs--error-action-label { + text-decoration: underline; + } +`; + +const ErrorActionLink = styled.button` + ${errorActionStyles} +`; + +const ErrorActionLinkStyled = styled(Link)` + ${errorActionStyles} `; interface ErrorPageProps { - image: StaticImageData; + icon: ComponentType>; + title: string; description: string; refreshTarget?: string; showReload?: boolean; + showHome?: boolean; + actions?: ReactNode; } const getSafeRefreshUrl = (target?: string): string | undefined => { @@ -40,94 +78,108 @@ const getSafeRefreshUrl = (target?: string): string | undefined => { }; export const ErrorPage = ({ - image, + icon: IconComponent, + title, description, refreshTarget, showReload, + showHome = true, + actions, }: ErrorPageProps) => { const { t } = useTranslation(); - const errorTitle = t('An unexpected error occurred.'); const safeTarget = getSafeRefreshUrl(refreshTarget); return ( <> - {errorTitle} - {t('Docs')} + {title} - {t('Docs')} - {errorTitle} - {t('Docs')} + {title} - {t('Docs')} - + + )} );