import './App.css';
import {Routes, Route, useNavigate} from 'react-router-dom';
import Noticias from './Noticias';
import Datos from './Datos';

function App() {
  const navigate = useNavigate();

  const navigateToNoticias = () => {
    // navigate to /Datos.js
    navigate('./Noticias.js', {replace: true});
  };

  const navigateToDatos = () => {
    // navigate to /Datos.js
    navigate('./Datos.js', {replace: true});
  };

  return (
    <>
      <div className="App">
        <button type="button" class="App_button1"> login </button>

        <h1>Bienvenido a la pagina admin</h1>

        <div className="App_button">
          <div className="left">
            <h1>Noticias:</h1>

            <h3>Puedes darle add, editar y borrar noticias</h3>
            
            <button type="button" onClick={navigateToNoticias} class="App_button2"> Click Me </button>

            <Routes>
              <Route path="/Noticias.js" element={<Noticias />} />
            </Routes>
          </div>
          
          <div className="right">
            <h1>Datos:</h1>

            <h3>Puedes darle add, editar y borrar datos</h3>

            <button type="button" onClick={navigateToDatos} class="App_button3"> Click Me </button>

            <Routes>
              <Route path="/Datos.js" element={<Datos />} />
            </Routes>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;