text: import React from 'react';
  import ToastComponent from '../../components/Toast/index';
  import FooterComponent from '../../components/Footer';
  import NavBar from '../../components/NavBar2';
  
  import './style.css';
  
  const Presenter = (props) => {
      const { state, handleOnClickAppLink, notificationRef } = props;
      return (
          <div>
              <NavBar {...props}></NavBar>
              <div className="container">
                  <ToastComponent ref={notificationRef} ></ToastComponent>
                  <div className="d-flex align-items-center p-3 my-3 text-white bg-purple rounded shadow-sm">
                      <span className="me-3 material-icons" width="48" height="48">apps</span>
                      <div className="lh-1">
                          <h1 className="h6 mb-0 text-white lh-1">Apps</h1>
                          <small>Listado de aplicaciones</small>
                      </div>
                  </div>
  
                  <div className="my-3 p-3 bg-white rounded shadow-sm">
                      <h6 className="border-bottom border-gray pb-2 mb-0">Disponibles</h6>
  
                      <div className="media text-muted pt-3">
                          <div className="bd-placeholder-img mr-2 rounded">
                              <span className="material-icons">note</span>
                          </div>
                          <div className="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                              <div className="d-flex justify-content-between align-items-center w-100">
                                  <strong className="text-gray-dark">Notes</strong>
                                  <div className="bd-placeholder-img mr-2 rounded">
                                      {state.loading && (
                                          <div className="text-center">
                                              <div className="spinner-border" role="status">
                                                  <span className="sr-only visually-hidden">Loading...</span>
                                              </div>
                                          </div>
                                      )}
                                      {!state.loading && (<span onClick={(e) => handleOnClickAppLink(e, 'notes')} className="material-icons">visibility</span>)}
                                  </div>
                              </div>
                              <span className="d-block">Manten tus notas siempre a tu alcance. Con Angos Notas puedes crear, editar, eliminar de forma rápida y sencilla.</span>
                          </div>
                      </div>
  
                      <small className="d-block text-right mt-3">
                          <a href="#">Todos</a>
                      </small>
                  </div>
  
                  <div className="my-3 p-3 bg-white rounded shadow-sm">
                      <h6 className="border-bottom border-gray pb-2 mb-0">Próximamente</h6>
  
                      <div className="media text-muted pt-3">
                          <div className="bd-placeholder-img mr-2 rounded">
                              <span className="material-icons">notifications</span>
                          </div>
                          <div className="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                              <div className="d-flex justify-content-between align-items-center w-100">
                                  <strong className="text-gray-dark">Notificación Push</strong>
                                  <div className="bd-placeholder-img mr-2 rounded">
  
                                  </div>
                              </div>
                              <span className="d-block">Administra tus notifiaciones PUSH. Fácil de integrar, fácil de usar, fácil de enviar.</span>
                          </div>
                      </div>
  
  
                      <small className="d-block text-right mt-3">
                          <a href="#">Todos</a>
                      </small>
                  </div>
              </div>
              <FooterComponent {...props}></FooterComponent>
          </div>
      );
  };
  
  export default Presenter;