use ComponentWrapper in UsersPage

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

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

react-advanced-tag1/src/common/components/exercises/UserEffect.tsx

@@ -57,8 +57,6 @@ export default function UserEffect() {
 
   return (
     <section>
-      <h2>users Effect Exercise</h2>
-
       {userId === 0 && <p>Please select a user</p>}
       {loading || userId === 0 ? (
         <p>Loading...</p>

react-advanced-tag1/src/common/components/exercises/UserOverview.tsx

@@ -21,7 +21,6 @@ export function UserOverview() {
   }
   return (
     <div>
-      <h2>User Overview</h2>
       <ul>
         {data.map(
           (user: {

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

@@ -1,13 +1,22 @@
+import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
 import UserEffect from '../common/components/exercises/UserEffect'
 import { UserOverview } from '../common/components/exercises/UserOverview'
-import Heading from '../common/components/globals/Heading'
 
 export default function UsersPage() {
   return (
-    <div>
-      <Heading title="Benutzer" />
-      <UserEffect />
-      <UserOverview />
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      <ComponentWrapper
+        title="Benutzer"
+        description="Load User with useEffect Hook"
+      >
+        <UserEffect />
+      </ComponentWrapper>
+      <ComponentWrapper
+        title="User Overview"
+        description="Load User List with useFetch Hook & use MeadiaQuery Hook"
+      >
+        <UserOverview />
+      </ComponentWrapper>
     </div>
   )
 }