import Router from './routes/Router';

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

function App() {
  return (
    <>
      <Navbar />
      <main id="main">
        <Router />
        <div className="container py-3">
          <div className="alert alert-primary">
            <h2>Übung 15: Komponenten von React Router aufteilen</h2>
            <p>
              In dem vorherigen Beispiel haben wir die einzelnen Komponenten für ein einfaches Verständnis der
              Funktionsweise von React Router in einer Datei definiert. In einer echten Anwendung würdest du die
              Komponenten wahrscheinlich in separate Dateien aufteilen und importieren.
            </p>
            <p>Genau das ist nun deine Aufgabe:</p>
            <ul className="list">
              <li>Teile die Komponenten Navbar, HomePage und AboutPage in separate Dateien auf.</li>
              <li>
                {' '}
                Importiere die Komponenten in der <strong>App.jsx</strong>-Datei.
              </li>
              <li>Passe die Pfade in den Link-Komponenten und Route-Komponenten entsprechend an.</li>
              <li>
                {' '}
                Füge eine weitere Seite hinzu, z.B. eine Kontaktseite, und verlinke sie in der Navigationsleiste.
              </li>
              <li>
                {' '}
                Die <strong>&lt;BrowserRouter&gt;</strong>-Komponente sollte nur einmal in der Anwendung verwendet
                werden. Üblicherweise wird sie in der main.jsx-Datei um die gesamte Anwendung gewickelt.
              </li>
            </ul>
            <p>
              <strong>Tipp:</strong> Du kannst die Dateien Navbar.jsx wie gewohnt im components-Ordner erstellen und die
              Seitenkomponenten HomePage.jsx, AboutPage.jsx und ContactPage.jsx in einem pages-Ordner ablegen. Das sorgt
              für eine bessere Struktur und Übersichtlichkeit deiner Anwendung.
            </p>
          </div>
        </div>
      </main>
    </>
  );
}

export default App;