import { Navigate } from 'react-router-dom';
import Router from './routes/Router';

// components
import Navbar from './components/navs/Navbar';

function App() {
  return (
    <>
      <Navbar />
      <Navigate to="/contact" />
      <main id="main">
        <Router />

        <div className="container py-3">
          <div className="alert alert-primary">
            <h3>Übung 17: Formularvalidierung über validator</h3>
            <p>
              Erweitere das Kontaktformular, um die Eingaben des Benutzers mit der <code>validator</code>-Bibliothek zu
              validieren. Die <code>validator</code>-Bibliothek bietet eine Vielzahl von Funktionen zur Validierung von
              Eingaben, z.B. für E-Mail-Adressen, URLs, Zahlen usw.
            </p>
            <ul className="list">
              <li>Installiere die validator-Bibliothek.</li>
              <li>
                Verwende die <code>isEmail</code>-Funktion, um die E-Mail-Adresse des Benutzers zu validieren.
              </li>
              <li>Überprüfe die Länge der Eingaben für firstname, lastname und message.</li>
              <li>Zeige entsprechende Fehlermeldungen an, wenn die Eingaben ungültig sind.</li>
            </ul>
          </div>
        </div>
        <div className="container py-3">
          <div className="alert alert-primary">
            <h3>Übung 18: Formularvalidierung nach Eingabe</h3>
            <p>
              Bisher haben wir die Formularvalidierung nur beim Absenden des Formulars durchgeführt. Erweitere das
              Kontaktformular, um die Eingaben des Benutzers in Echtzeit zu validieren. Das bedeutet, dass die
              Fehlermeldungen sofort angezeigt werden, wenn der Benutzer ein Feld verlässt und eine ungültige Eingabe
              macht.
            </p>
            <p>
              <strong>Hinweis:</strong> Verwende das <code>onBlur</code>-Event, um die Validierung nach dem Verlassen
              eines Feldes auszulösen.
            </p>
          </div>
        </div>
      </main>
    </>
  );
}

export default App;