src/common/Error.tsx

import * as Montserrat from "@remotion/google-fonts/Montserrat";

export function ErrorMsg(props: { error?: string, children?: any }) {

  const { fontFamily } = Montserrat.loadFont("normal", {
    weights: ["500"],
    ignoreTooManyRequestsWarning: true
  });
  const baseStyle = {
    borderColor: "transparent",
    borderRadius: "2rem",
    borderLeftWidth: "4px",
    borderRightWidth: "4px",
    color: "#fff",
    textShadow: "0px 0px 50px #000, 0px 0px 50px #000",
    padding: "0.2rem 1.5rem",
  };

  return (
    <center style={{
      width: '100%',
      height: '100%',
      justifyContent: 'center',
      alignItems: 'center',
      alignContent: 'center'
    }}>
      <span style={{
        ...baseStyle,
        fontFamily,
        fontSize: 42,
      }}>
        {props.error || props.children || 'An error occurred in rendering'}
      </span>
    </center>
  )
}