Se crea el componente y los estilos para el panel que muestra la informacion...

import { Dispatch, SetStateAction} from "react";

import { Town } from "../../infraestructure/entities/town";

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

import { faEdit, faLanguage } from "@fortawesome/free-solid-svg-icons";

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

import { LoadingScreen } from "../loading_screen/loading_screen";

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

import { SuperadminPanelTownRegister } from "../sa_panel_town/sa_panel_town_register/sa_panel_town_register";

interface props {

  isWindowActive: boolean;

  setIsWindowActive: Dispatch<SetStateAction<boolean>>;

  town: Town | undefined;

  updateTown: () => Promise<void>;

}

export const AdminTownInfo = ({updateTown, isWindowActive, setIsWindowActive, town}: props) => {

  const {

    isEnglish,

    isLoading,

    setIsEnglish,

    setIsLoading,  

    renderCount,

    forceRenderList,

    statesList

  } = useAdminTownInfo(updateTown);

  if(!town){

    return (

      <div style={{display:'flex' , alignItems: 'center', justifyContent: 'center', width: '100%'}}>

        No tienes un pueblo asignado

      </div>

    );

  }

  return (

  <div className="town_info_root">

    {isWindowActive && 

      <SuperadminPanelTownRegister 

        setWindowActive={setIsWindowActive} 

        setActualWindowActive={setIsWindowActive}

        forceRenderList={forceRenderList} 

        isRegister={false}

        form={town}

        statesList={statesList}

        />

    }

    <div className="town_info_cnt" key={renderCount}>

      {isLoading && 

        <div style={{width: '100%', height: '100%', background:'#eaeaea', position:'fixed'}}>

          <LoadingScreen/>

        </div>

      }

      <div className="info_header">

        <p>{town?.name}</p>

      </div>

      <div className="info_body">

        <div className="town_image_cnt">

          <img src={town?.imageURL as string} onLoad={() => setIsLoading(false)}/>

        </div>

        <div className="info_fields_cnt">

          <div className="buttons_cnt">

            <div className="lang_change_cnt">

              <label>

                {isEnglish ?

                  "Inglés"

                :

                  "Español"

                }

              </label>

              <FontAwesomeIcon icon={faLanguage}

                className="lang_change_btn"

                onClick={ () =>

                  {

                    if(!isWindowActive){

                      setIsEnglish(!isEnglish);

                    }

                  }

                }

              />

            </div>

            <FontAwesomeIcon style={{cursor: 'pointer'}} icon={faEdit} 

              className="edit_btn"

              onClick={

                ()=>{

                  if(!isWindowActive){

                    setIsWindowActive(true);

                  }

                }

              }

            />

          </div>

          {

            isEnglish ?

            <textarea id="0" className="town_desc_textarea"

              value={town?.descriptionEN} 

              disabled={true}

            />

            :

            <textarea id="1" className="town_desc_textarea"

              value={town?.descriptionES} 

              disabled={true}

          />

          }

          {town.state}

        </div>

      </div>

    </div>

  </div>

  );

}

 No newline at end of file

.town_info_root{

  height: 100%;

  width: 100%;

}

.town_info_cnt{

  display: flex;

  flex-direction: column;

  height: 100%;

  width: 100%;

}

.info_header{

  width: 100%;

  height: 10%;

}

.info_header p{

  font-size: 38;

}

.info_body{

  width: 100%;

  height: 90%;

  display: flex;

  flex-direction: row;

}

.town_image_cnt{

  height: 100%;

  width: 50%;

}

.info_fields_cnt{

  width: 50%;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: center;

}

.town_desc_textarea{

  width: 100%;;

  height: 30%;

  padding: 10px;

  overflow-y: auto;

  resize: none;

  margin: 10px 10px 10px;

}

.buttons_cnt{

  display: flex;

  width: 100%;

  flex-direction: row;

  align-self: start;

}

.edit_btn{

  position: absolute;

  right: 20px;

}

.lang_change_btn{

  cursor: pointer;

}