Message() — react Function Reference

Source Code

compiler/apps/playground/components/Message.tsx lines 37–77

  ({id, title, level, source, codeframe}, ref) => {
    const {closeSnackbar} = useSnackbar();
    const isDismissible = source !== MessageSource.Playground;

    return (
      <SnackbarContent
        ref={ref}
        className="flex items-start justify-between gap-3 px-4 py-3 text-sm bg-white border rounded-md shadow w-toast">
        <div className="flex gap-3 w-toast-body">
          {level === MessageLevel.Warning ? (
            <div className="flex items-center justify-center flex-none rounded-md w-7 h-7 bg-amber-100">
              <ExclamationIcon className="w-5 h-5 text-amber-600" />
            </div>
          ) : level === MessageLevel.Error ? (
            <div className="flex items-center justify-center flex-none bg-red-100 rounded-md w-7 h-7">
              <BanIcon className="w-5 h-5 text-red-600" />
            </div>
          ) : (
            <div className="flex items-center justify-center flex-none rounded-md bg-sky-100 w-7 h-7">
              <InformationCircleIcon className="w-5 h-5 text-sky-600" />
            </div>
          )}
          <div className="flex flex-col justify-center gap-1 w-toast-title">
            <p className="w-full">{title}</p>
            {codeframe ? (
              <pre className="overflow-x-auto break-words whitespace-pre-wrap">
                <code className="text-xs">{codeframe}</code>
              </pre>
            ) : null}
          </div>
        </div>
        {isDismissible ? (
          <button
            className="flex items-center justify-center flex-none transition-colors duration-150 ease-in rounded-md justify-self-end group w-7 h-7 hover:bg-gray-200"
            onClick={() => closeSnackbar(id)}>
            <XIcon className="w-5 h-5 fill-gray-500 group-hover:fill-gray-800" />
          </button>
        ) : null}
      </SnackbarContent>
    );
  },