Error templates

Both graphics and localized texts are already included in ready-to-use templates. Read more about localization in i18n.

import {
  AccessDenied,
  Maintenance,
  PageError,
  PageNotFound,
  ProjectNotFound,
} from '@semcore/ui/errors';
import type { AccessDeniedProps, MaintenanceProps, PageErrorProps, PageNotFoundProps, ProjectNotFoundProps } from '@semcore/ui/errors';
import React from 'react';

type errorProps = AccessDeniedProps & MaintenanceProps & PageErrorProps & PageNotFoundProps & ProjectNotFoundProps;

const Demo = (props: errorProps) => (
  <>
    <AccessDenied homeLink={props.homeLink} titleTag={props.titleTag} />
    <Maintenance toolName={props.toolName} homeLink={props.homeLink} titleTag={props.titleTag} />
    <PageNotFound homeLink={props.homeLink} titleTag={props.titleTag} />
    <ProjectNotFound titleTag={props.titleTag} projectsLink={props.projectsLink} contactsLink={props.contactsLink} supportTeamLink={props.supportTeamLink} />
    <PageError titleTag={props.titleTag} />
  </>
);

export const defaultProps: errorProps = {
  toolName: 'Intergalactic',
  homeLink: undefined,
  titleTag: undefined,
  projectsLink: undefined,
  contactsLink: undefined,
  supportTeamLink: undefined,
};

Demo.defaultProps = defaultProps;

export default Demo;

Custom error

You can create a custom error message. In the Error package, you will find the getIconPath feature, which will allow you to get the latest versions of illustrations. The full list of illustrations can be found in Illustration.

import Button from '@semcore/ui/button';
import Error, { getIconPath } from '@semcore/ui/errors';
import React from 'react';

const Demo = () => (
  <Error icon={getIconPath('confirmation')}>
    <Error.Title>Confirm you are a real person</Error.Title>
    <Error.Description wMax={510}>
      We need to make sure you're not a robot. Please complete the security check, and we'll be out
      of your way.
    </Error.Description>
    <Error.Controls>
      <Button size='l' use='primary' theme='info'>
        Submit
      </Button>
    </Error.Controls>
  </Error>
);

export default Demo;