Add new kind of system message with red text

This commit is contained in:
Jamie Kyle 2023-01-12 15:33:22 -08:00 committed by GitHub
parent 342373bdfe
commit 77e196279c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 89 additions and 7 deletions

View file

@ -5,20 +5,30 @@ import type { ReactNode } from 'react';
import React, { forwardRef } from 'react';
import classNames from 'classnames';
export enum SystemMessageKind {
Normal = 'Normal',
Danger = 'Danger',
Error = 'Error',
}
type PropsType = {
icon: string;
contents: ReactNode;
button?: ReactNode;
isError?: boolean;
kind?: SystemMessageKind;
};
export const SystemMessage = forwardRef<HTMLDivElement, PropsType>(
function SystemMessageInner({ icon, contents, button, isError }, ref) {
function SystemMessageInner(
{ icon, contents, button, kind = SystemMessageKind.Normal },
ref
) {
return (
<div
className={classNames(
'SystemMessage',
isError && 'SystemMessage--error'
kind === SystemMessageKind.Danger && 'SystemMessage--danger',
kind === SystemMessageKind.Error && 'SystemMessage--error'
)}
ref={ref}
>