add Page Router & improve styling

react-advanced-tag1/src/App.css

@@ -1,9 +1,4 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
+
 
 .logo {
   height: 6em;

react-advanced-tag1/src/App.tsx

@@ -1,17 +1,23 @@
+import { Route, Routes } from 'react-router-dom'
 import './App.css'
 // import EffectExercises from './components/exercises/EffectExercises'
-import UserEffect from './components/exercises/UserEffect'
-import { UserOverview } from './components/exercises/UserOverview'
-import Heading from './components/globals/Heading'
 import MainLayout from './layouts/MainLayout'
+import HomePage from './routes/HomePage'
+import UsersPage from './routes/UsersPage'
+import EffectExercisesPage from './routes/EffectExercisesPage'
+import FormsPage from './routes/FormsPage'
+import MemoCallbackPage from './routes/MemoCallbackPage'
 
 function App() {
 
   return <MainLayout>
-    <Heading />
-    {/* <EffectExercises /> */}
-    <UserEffect />
-    <UserOverview />
+    <Routes>
+      <Route path="/" element={<HomePage />} />
+      <Route path="/user" element={<UsersPage />} />
+      <Route path="/effect" element={<EffectExercisesPage />} />
+      <Route path="/forms" element={<FormsPage />} />
+      <Route path="/memocallback" element={<MemoCallbackPage />} />
+    </Routes>
     </MainLayout>
 }
 

react-advanced-tag1/src/components/Header/Navigation.tsx

@@ -2,8 +2,11 @@ export default function Navigation () {
     return (
         <nav>
             <ul>
-                <li>home</li>
-                <li>test</li>
+                <li><a href="/">Home</a></li>
+                <li><a href="/user">Users</a></li>
+                <li><a href="/effect">Effects</a></li>
+                <li><a href="/forms">Forms</a></li>
+                <li><a href="/memocallback">Memo und Callback</a></li>
             </ul>
         </nav>);
 }

react-advanced-tag1/src/components/Header/index.tsx

@@ -4,7 +4,7 @@ const Header = () => {
     console.log("Header rendered");
     return (
         <header>
-            <h2>My Application</h2>
+            <h1>My Application</h1>
             <Navigation />
         </header>
     );

react-advanced-tag1/src/components/exercises/MemoCallback/index.tsx

@@ -23,7 +23,6 @@ export default function MemoCallback() {
     });
     return (
         <div>
-            <h1>Memo Callback Übung</h1>
             <button onClick={handleShuffle}>Shuffle</button>
             <Search onChange={handleSearch} />
             <div>

react-advanced-tag1/src/components/globals/Heading.tsx

@@ -1,8 +1,8 @@
 export default function Heading({title = "Hallo Teilnehmer"}: {title?: string}): React.ReactElement {
     console.log("Heading rendered");
     return (
-        <h1 >
+        <h2 >
             {title}
-        </h1>
+        </h2>
     );
 }

react-advanced-tag1/src/index.css

@@ -25,7 +25,6 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
 }

react-advanced-tag1/src/layouts/MainLayout.css

@@ -0,0 +1,56 @@
+#root {
+    width: 100%;
+}
+
+header {
+    background-color: #1a1a1a;
+    color: #ffffff;
+    padding: 1rem;
+    text-align: center;
+}
+
+header nav {
+    display: flex;
+    justify-content: center;
+    gap: 2rem;
+}
+
+header nav ul {
+    list-style: none;
+    padding: 0;
+}
+header nav li {
+    display: inline;
+}
+
+header nav a {
+    color: #ffffff;
+    text-decoration: none;
+    font-weight: bold;
+    padding: 0.5rem 1rem;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+header nav a:hover {
+    text-decoration: underline;
+}
+header nav a.active {
+    text-decoration: underline;
+}
+
+
+
+footer {
+    background-color: #1a1a1a;
+    color: #ffffff;
+    padding: 1rem;
+    text-align: center;
+}
+
+
+.content {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}

react-advanced-tag1/src/layouts/MainLayout.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import Footer from "../components/Footer";
 import Header from "../components/Header";
+import './MainLayout.css'
 
 export default function MainLayout({children}: {children: React.ReactNode | React.ReactElement | React.ReactElement[]}): React.ReactElement {
   
@@ -17,9 +18,13 @@ export default function MainLayout({children}: {children: React.ReactNode | Reac
   return (
     <>
         <Header />
+
+        <div className="content">
             {children}
 
             <button onClick={handleClick}>Click</button>
+        </div>
+
         <Footer />
     </>
   );

react-advanced-tag1/src/main.tsx

@@ -2,9 +2,12 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
+import { BrowserRouter } from 'react-router-dom'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
 )

react-advanced-tag1/src/routes/EffectExercisesPage.tsx

@@ -0,0 +1,11 @@
+import EffectExercises from "../components/exercises/EffectExercises";
+import Heading from "../components/globals/Heading"
+
+export default function EffectExercisesPage() {
+    return (
+        <div>
+            <Heading title="Effekte" />
+            <EffectExercises />
+        </div>
+    );
+}

react-advanced-tag1/src/routes/FormsPage.tsx

@@ -0,0 +1,11 @@
+import RefExercise from "../components/exercises/RefExercise";
+import Heading from "../components/globals/Heading";
+
+export default function FormsPage() {
+    return (
+        <div>
+            <Heading title="Formulare" />
+            <RefExercise />
+        </div>
+    );
+}

react-advanced-tag1/src/routes/HomePage.tsx

@@ -0,0 +1,10 @@
+import Heading from "../components/globals/Heading"
+
+export default function HomePage() {
+    return (
+        <>
+            <Heading title="Willkommen" />
+            <p>Willkommen auf der Startseite!</p>
+        </>
+    );
+}

react-advanced-tag1/src/routes/MemoCallbackPage.tsx

@@ -0,0 +1,11 @@
+import MemoCallback from "../components/exercises/MemoCallback";
+import Heading from "../components/globals/Heading";
+
+export default function MemoCallbackPage() {
+    return (
+        <>
+            <Heading title="Memo und Callback" />
+            <MemoCallback />
+        </>
+    )
+}

react-advanced-tag1/src/routes/UsersPage.tsx

@@ -0,0 +1,13 @@
+import UserEffect from "../components/exercises/UserEffect";
+import { UserOverview } from "../components/exercises/UserOverview";
+import Heading from "../components/globals/Heading";
+
+export default function UsersPage() {
+    return (
+        <div>
+            <Heading title="Benutzer" />
+            <UserEffect />
+            <UserOverview />
+        </div>
+    );
+}