v3/packages/design-system/molecules/error-banner/ErrorBanner.tsx

import * as React from 'react';
import {
    ErrorDivider,
    ErrorSideCode,
    ErrorText,
    ErrorTextLower,
    ErrorWrapper,
} from './ErrorBanner.styled';

export type ErrorMessage = {
    english: string;
    japanese?: string;
    friendlyCode?: string;
};

type ErrorBannerProps = {
    message: Required<ErrorMessage>;
};

export const ErrorBanner = (props: ErrorBannerProps) => (
    <ErrorWrapper>
        <ErrorSideCode>{props.message.friendlyCode}</ErrorSideCode>
        <ErrorDivider />
        <div>
            <ErrorText>{props.message.english}</ErrorText>
            <ErrorTextLower>{props.message.japanese}</ErrorTextLower>
        </div>
    </ErrorWrapper>
);