Se crea el componente y sus estilos para la ventana de registro de una categoría

*{

  user-select: none;

}

.category_register_wrap{

  position: absolute;

  z-index: 99;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  margin: auto;

  width: 25vw;

  height: 30vh;

  display: flex;

  flex-direction: column;

  background: white;

  border: solid 2px black;

}

.category_register_header{

  display: flex;

  width: 100%;

  align-items: center;

  justify-content: center;

  padding: 5px;

  background: #ccc;

  height: 15%;

}

.category_register_close_btn{

  display: inline-block;

  cursor: pointer;

  position: absolute;

  right: 5px;

}

.category_register_body{

  height: 85%;

  width: 100%;

}

.category_register_body form{

  height: 100%;

  display: flex;

}

.inputs_container{

  height: 100%;

  width: 100%;

}

.input{

  width: 100%;

  display: flex;

  flex-direction: column;

}

.input input{

  margin: 0px 30px 0px 30px;

}

.input_header{

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

}

.error{

  color: red;

  font-size: 12px;

  padding: 0;

  margin: 0;

}

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

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

import { Dispatch, SetStateAction} from "react";

import "./assets/css/styles.css";

import { useCategory } from "../../../hooks/useCategory";

interface props {

  handleClickToClose: () => void;

  forceRenderList: () => void;

}

export const SuperAdminPanelCategoryRegister = ({handleClickToClose, forceRenderList}: props) => {

  const {

    register,

    handleSubmit,

    errors,

    onSubmit,

  } = useCategory(forceRenderList, handleClickToClose);

  return (

    <div className="category_register_wrap">

      <div className="category_register_header">

        Registra la categoría

        <FontAwesomeIcon icon={faWindowClose} className="category_register_close_btn"

          onClick={() => handleClickToClose()}/>

      </div>

      <div className="category_register_body">

        <form onSubmit={handleSubmit(onSubmit)}>

          <div className="inputs_container">

            <div className="input">

              <div className="input_header">

                Nombre de la categoría(español)

              </div>

              <input 

                type="text"

                {...register('nameES')}

                autoComplete="off"

              />

              <p className="error">{errors.nameES?.message}</p>

            </div>

            <div className="input">

              <div className="input_header">

                Nombre de la categoría(inglés)

              </div>

              <input 

                type="text"

                {...register('nameEN')}

                autoComplete="off"

              />

              <p className="error">{errors.nameEN?.message}</p>

            </div>

            <input type="submit"/>

          </div>

        </form>

      </div>

    </div>

  );

}

 No newline at end of file