Se crea un componente para mostrar un error

.error-window {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  margin: auto;

  width: 500px;

  height: 200px;

  z-index: 2;

  box-shadow: 0px 15px 20px rgba(0,0,0,0.1);

  background-color: red;

  display: flex;

  flex-direction: column;

  font-size: 30px;

  font-weight: 500;

  line-height: 50px;

  text-align: center;

  user-select: none;

}

.window-error-header{

  display: flex;

  flex-direction: row;

  align-items: center;

  color: white;

  justify-content: center;

  height: 20%;

}

.window-title{

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

}

.window-title div{

  color: white;

}

.window-close-button{

  color: white;

  display: inline-block;

  cursor: pointer;

  position: absolute;

  right: 5px;

}

.window-error-body{

  display: flex;

  flex-grow: 1;

  background: white;

  align-items: center;

  justify-content: center;

  height: 80%;

  font-size: 25px;

  font-weight: 400;

  line-height: 50px;

}

.circle-exclamation-icon{

  color: red;

  height: 50px;

  margin: 20px;

}

 No newline at end of file

import { faWindowClose, faCircleExclamation } from "@fortawesome/free-solid-svg-icons";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { useState } from "react";

import './assets/css/styles.css';

interface props {

  title?: string;

  message: string;

}

export const ErrorWindow = ({title, message}:props) => {

  const [isVisible, setIsVisible] = useState(true);

  if(!isVisible) return null;

  return (

    <div className="error-window">

      <div className="window-error-header">

        <div className="window-title">

          {title || "Error"}

        </div>

        <FontAwesomeIcon

          icon={faWindowClose} 

          className="window-close-button"

          onClick={() => {

            setIsVisible(false);

          }}

        />

      </div>

      <div className="window-error-body">

        <FontAwesomeIcon icon={faCircleExclamation} className="circle-exclamation-icon"/>

        {message}

      </div>

    </div>

  );

}

 No newline at end of file