Se crea un componente y sus estilos para una ventana de confirmacion

.confirmation_dialog_wrap{

  position: absolute;

  z-index: 99;

  left: 0;

  right: 0;

  margin: auto;

  width: 25vw;

  display: flex;

  flex-direction: column;

  background: white;

  border: solid 2px black;

}

.confirmation_dialog_wrap .header{

  background: #ccc;

}

.confirmation_dialog_wrap .body{

  display: flex;

  flex-direction: column;

  width: 100%;

  align-items: center;

  justify-content: center;

}

.confirmation_dialog_wrap .buttons{

  display: flex;

  justify-content: center;

  align-items: center;

}

.confirmation_dialog_wrap .buttons button{

  margin: 5px;

  width: 60px;

}

import { Dispatch, SetStateAction } from 'react';

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

interface props{

  hangleToClose: () => void;

  setAnswer?: Dispatch<SetStateAction<boolean>>;

  title?: string;

  message: string;

}

export const ConfirmationDialog = ({hangleToClose, setAnswer, title, message}:props) => {

  return (

    <div className="confirmation_dialog_wrap">

      <div className="header">

        <h3>{title || 'Confirmar acción'}</h3>

      </div>

      <div className="body">

        <div className="content">

          <p>{message}</p>

        </div>

        <div className="buttons">

          <button onClick={() => {

            if(setAnswer){

              setAnswer(true);

            }

            hangleToClose();

          }}>Sí</button>

          <button onClick={() => {

            if(setAnswer){

              setAnswer(false);

            }

            hangleToClose();

          }

          }>No</button>

        </div>

      </div>

    </div>

  );

}

 No newline at end of file