// primero cambiemos de lugar a App.jsx, y creemos una nueva carpeta llamada routes
// pues components, no es un lugar muy adecuado

// Ahora creemos un archivo llamado RecoveryPassword.jsx para crear otra sección
// esta la sacaremos de los archivos del otro curso
import React from 'react';
import '../styles/RecoveryPassword.scss';

const Recoverypassword = () => {
    return (
        <div className="login">
            <div className="form-container">
                <img src="./logos/logo_yard_sale.svg" alt="logo" className="logo" />
                <h1 className ="title">Email has been sent!</h1>
                <p className ="subtitle">Please check your inbox for instructions on how to reset the password</p>
                <div className ="email-image">
                <img src="./icons/email.svg" alt="email" />
                </div>
                <button className ="primary-button login-button">Login</button>
                <p className ="resend">
                <span>Didn't receive the email?</span>
                <a href="/">Resend</a>
                </p>
            </div>
        </div>
    );
}

export default Recoverypassword;

// como importamos estilos, creemos el archivo RecoveryPassword.scss donde pondre
// mos los estilos
@import 'vars'; 

.login {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
}
.form-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 300px;
  justify-items: center;
}
.logo {
  width: 150px;
  margin-bottom: 48px;
  justify-self: center;
  display: none;
}
.title {
  font-size: var(--lg);
  margin-bottom: 12px;
  text-align: center;
}
.subtitle {
  color: var(--very-light-pink);
  font-size: var(--md);
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 32px;
  text-align: center;
}
.email-image {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background-color: var(--text-input-field);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}
.email-image img {
  width: 80px;
}
.resend {
  font-size: var(--sm);
}
.resend span {
  color: var(--very-light-pink);
}
.resend a {
  color: var(--hospital-green);
  text-decoration: none;
}
.primary-button {
  background-color: var(--hospital-green);
  border-radius: 8px;
  border: none;
  color: var(--white);
  width: 100%;
  cursor: pointer;
  font-size: var(--md);
  font-weight: bold;
  height: 50px;
}
.login-button {
  margin-top: 14px;
  margin-bottom: 30px;
}
@media (max-width: 640px) {
  .logo {
    display: block;
  }
}
// no es necesario colocar body ni root, pues ya están definidas

¿Qué es router en React?

Debido a que React es de tipo SPA(single page application), no recarga la página cuando cambiamos de url. Sin embargo, router nos ayuda a crear otra página para poder navegar en nuestra aplicación. Imagina twitter web, cuando das click en un tweet, se abre otra sección donde puedes ver el tweet. Sería un problema que al momento de darle click, no cambie la url, por lo que ese tweet no tiene dirección propia, no se guardaría en tu historial y sería un problema el SEO. Para ello, usamos router, que se encargará de administrar esta situación, donde en el momento que abras el tweet, cambie la URL, pero todavía mantenga ese dinamismo y rapidez de una SPA.

¿Entonces qué es ReactRouterDOM?

#Para instalar
npm install react-router-dom

//import en App.jsx
import { BrowserRouter, Switch, Route } from 'react-router-dom';
// usaremos esas 3 herramientas

ReactRouterDOM es una librería que te permite implementar enrutado dinámico en la aplicación. Nos facilita pues podemos enrutar nuestra app basada en componentes de la app (como login o recoverypassword).

const App = () => {
    return (
        <BrowserRouter>
            <Switch>
                <Layout>
                    <Route exact path="/" component={Home} />
                    <Route exact path="/login" component={Login} />
                    <Route exact path="recovery-password" component={Recoverypassword} />
                    <Route component={NotFound} />
                </Layout>
            </Switch>
        </BrowserRouter>
    );
}

¿Qué estamos haciendo?

BrowserRoute sirve para implementar router en el navegador

Switch regresa la primera ruta que coincida. En pocas palabras, si estamos en www.platzi.com/contacto , regresará el componente que coincida a este (es decir, el componente que contenga la lógica de contacto). En esta caso, estamos poniendo varios routes dentro de switch, ¿para qué? para que solamente traiga esa misma ruta, y no tenga que buscar más. Como si fuese un switch de javascript efectivamente. Y por ello tenemos un route sin path, que será el valor por defecto.

Layout solamente renderizará el route que coincida efectivamente con la URL especificada.

ReactDOM - React

Using a Switch Component in React Router

React Router DOM: How to handle routing in web apps - LogRocket Blog