done

src/App.jsx

@@ -1,9 +1,37 @@
 import "./App.css";
+import IdCard from "./components/IdCard";
+import Greetings from "./components/Greetings";
+import Random from "./components/Random";
+import BoxColor from "./components/BoxColor";
 
 function App() {
   return (
     <div className="App">
-      <h1> LAB | React Training</h1>
+      <IdCard
+        lastName="Doe"
+        firstName="John"
+        gender="male"
+        height={178}
+        birth={new Date("1992-07-14")}
+        picture="https://randomuser.me/api/portraits/men/44.jpg"
+      />
+
+      <IdCard
+        lastName="Delores "
+        firstName="Obrien"
+        gender="female"
+        height={172}
+        birth={new Date("1988-05-11")}
+        picture="https://randomuser.me/api/portraits/women/44.jpg"
+      />
+
+      <Greetings lang="de">Ludwig</Greetings>
+      <Greetings lang="fr">François</Greetings>
+
+      <Random min={1} max={6}/>
+      <Random min={1} max={100}/>
+      <BoxColor r={255} g={0} b={0} />
+      <BoxColor r={128} g={255} b={0} />
     </div>
   );
 }

src/components/BoxColor.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function BoxColor(props) {
+  return (
+    <div style={{backgroundColor : `rgb(${props.r},${props.g},${props.b})`}}>
+        test
+    </div>
+  )
+}

src/components/Greetings.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+export default function Greetings(props) {
+    let massage;
+    if(props.lang === "de"){
+        massage = "hallo"
+    }else if(props.lang === "fr"){
+        massage = "bonjour"
+    }
+  return (
+    <div>
+        <p> {massage} {props.children}</p>
+    </div>
+  )
+}

src/components/IdCard.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export default function IdCard(props) {
+  return (
+    <div>
+        <img src={props.picture} alt="" />
+        <div>
+            <p><span>lastName=</span> {props.lastName}</p>
+            <p><span>firstName= </span>{props.firstName}</p>
+            <p><span>gender=</span>{props.gender}</p>
+            <p><span>height=</span>{props.height}</p>
+            <p><span>birth=</span>{props.birth.toLocaleDateString()}</p>
+        </div>
+    </div>
+  )
+}

src/components/Random.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default function Random(props) {
+    let resault = Math.floor(Math.random() * (props.max - props.min + 1)) + props.min;
+  return (
+    <div>
+        <p>random value between {props.min} and {props.max} is {resault}</p>
+    </div>
+  )
+}