use ComponentWrapper

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

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

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

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

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

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

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

@@ -4,7 +4,7 @@ import { UserOverview } from '../common/components/exercises/UserOverview'
 
 export default function UsersPage() {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
       <ComponentWrapper
         title="Benutzer"
         description="Load User with useEffect Hook"