add ComponentWrapper

react-advanced-tag1/src/App.tsx

@@ -7,18 +7,21 @@ import UsersPage from './routes/UsersPage'
 import EffectExercisesPage from './routes/EffectExercisesPage'
 import FormsPage from './routes/FormsPage'
 import MemoCallbackPage from './routes/MemoCallbackPage'
+import ComponentWrapperPage from './routes/ComponentWrapperPage'
 
 function App() {
 
   return <MainLayout>
-    <Routes>
+          <Routes>
-      <Route path="/" element={<HomePage />} />
+            <Route path="/" element={<HomePage />} />
-      <Route path="/user" element={<UsersPage />} />
+            <Route path="/user" element={<UsersPage />} />
-      <Route path="/effect" element={<EffectExercisesPage />} />
+            <Route path="/effect" element={<EffectExercisesPage />} />
-      <Route path="/forms" element={<FormsPage />} />
+            <Route path="/forms" element={<FormsPage />} />
-      <Route path="/memocallback" element={<MemoCallbackPage />} />
+            <Route path="/memocallback" element={<MemoCallbackPage />} />
-    </Routes>
+            <Route path="/componentwrapper" element={<ComponentWrapperPage />} />
-    </MainLayout>
+
+          </Routes>
+        </MainLayout>
 }
 
 export default App

react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.css

@@ -0,0 +1,19 @@
+.component-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background-color: #1a1a1a;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.component-content {
+    width: 100%;
+    max-width: 800px;
+    background-color: #888;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}

react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.tsx

@@ -0,0 +1,17 @@
+import './ComponentWrapper.css'
+
+interface ComponentWrapperProps {
+    title?: string;
+    children: React.ReactNode;
+}
+export default function ComponentWrapper({ children, title }: ComponentWrapperProps): React.ReactElement {
+    console.log("ComponentWrapper rendered");
+    return (
+        <div className='component-wrapper'>
+            {title && <h2>{title}</h2>}
+            <div className='component-content'>
+                {children}
+            </div>
+        </div>
+    );
+}

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

@@ -7,6 +7,7 @@ export default function Navigation () {
                 <li><a href="/effect">Effects</a></li>
                 <li><a href="/forms">Forms</a></li>
                 <li><a href="/memocallback">Memo und Callback</a></li>
+                <li><a href="/componentwrapper">Component Wrapper</a></li>
             </ul>
         </nav>);
 }

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

@@ -0,0 +1,15 @@
+import ComponentWrapper from "../common/components/ComponentWrapper/ComponentWrapper";
+import EffectExercises from "../common/components/exercises/EffectExercises";
+
+export default function ComponentWrapperPage() {
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
+            <ComponentWrapper title='Komponenten Wrapper Test'>
+                <h1>Hallo</h1>
+            </ComponentWrapper>
+            <ComponentWrapper title='Komponenten Wrapper Test2'>
+                <EffectExercises />
+            </ComponentWrapper>
+    </div>
+    );
+}