v3/packages/design-system/templates/errors/Errors.tsx

import { DotOverlay } from '@roleypoly/design-system/atoms/dot-overlay';
import { Hero } from '@roleypoly/design-system/atoms/hero';
import {
  ErrorBanner,
  ErrorMessage,
} from '@roleypoly/design-system/molecules/error-banner';
import { AppShell } from '@roleypoly/design-system/organisms/app-shell';
import { DiscordUser } from '@roleypoly/types';
import * as React from 'react';
import { getMessageFromCode } from './errorStrings';

export type ErrorProps = {
  code: string | number;
  messageOverride?: ErrorMessage;
  user?: DiscordUser | null;
};

export const Error = (props: ErrorProps) => {
  const messageFromCode = getMessageFromCode(props.code);

  return (
    <AppShell user={props.user || undefined}>
      <DotOverlay />
      <Hero topSpacing={100} bottomSpacing={25}>
        <ErrorBanner message={messageFromCode} />
      </Hero>
    </AppShell>
  );
};