Se crea el componente y los estilos para el panel de visualización de las categorías

.panel_category_content{

  width: 100%;

  max-height: 100%;

  display: flex;

  flex-direction: column;

}

.panel_category_header{

  height: 7%;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 5px;

  background: gray;

}

.panel_category_header .category_add_btn{

  display: inline-block;

  cursor: pointer;

  position: absolute;

  right: 5px;

}

.panel_category_body{

  height: 93%;

  width: 100%;

  background: white;

}

 No newline at end of file

import { Dispatch, SetStateAction, useState } from "react";

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

import { SuperAdminPanelCategoryRegister } from "../sa_panel_category_register/sa_panel_category_register";

import { SuperAdminPanelCategoryList } from "../sa_panel_category_list/sa_panel_category_list";

interface props {

  isWindowActive: boolean;

  setIsWindowActive: Dispatch<SetStateAction<boolean>>;

}

export const SuperAdminPanelCategoryScreen = ({isWindowActive,setIsWindowActive}: props) => {

  const [renderCount, setRenderCount] = useState(0);

  const [isRegisterWindowOpen, setIsRegisterWindowOpen] = useState(false);

  const handleClickToClose = () => {

    setIsWindowActive(false);

    setIsRegisterWindowOpen(false);

  }

  const forceRenderList = () =>{

    setRenderCount(prevCount => prevCount + 1);

  }

  return (

    <div className="panel_category_content">

      <div className="panel_category_header">

        Administrar Categorías

        <button className="category_add_btn"

          disabled={isWindowActive}

          onClick={() => {

            setIsWindowActive(true);

            setIsRegisterWindowOpen(true);

          }}

        >

          Registrar nueva categoría

        </button>

      </div>

      <div className="panel_category_body">

        {

          isRegisterWindowOpen && <SuperAdminPanelCategoryRegister 

          handleClickToClose={handleClickToClose}

            forceRenderList={forceRenderList}

            />

        }

        <SuperAdminPanelCategoryList key={renderCount} setIsWindowActive={setIsWindowActive} isWindowActive={isWindowActive}/>

      </div>

    </div>

  );

}

 No newline at end of file