Solved lab - Daniel Bailón

src/App.css

@@ -0,0 +1,33 @@
+.userDiv {
+  display: flex;
+  align-items: center;
+  border: 1px solid black;
+  padding: 10px;
+  margin: 10px;
+  width: 100%
+}
+
+.greetings {
+  border: 1px solid black;
+  padding: 10px;
+  margin: 10px;
+  font-family: Arial, sans-serif;
+}
+
+.random {
+  border: 1px solid black;
+  padding: 10px;
+  margin: 10px;
+  font-family: Arial, sans-serif;
+}
+
+.box-color {
+  width: 400px;
+  height: 100px;
+  border: 1px solid black;
+  margin: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: Arial, sans-serif;
+}

src/App.jsx

@@ -1,11 +1,46 @@
-import "./App.css";
+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>
+    <div>
+
+      <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>
+
   );
 }
 
-export default App;
+export default App;

src/components/BoxColor.jsx

@@ -0,0 +1,16 @@
+import "../App.css";
+
+function BoxColor({ r, g, b }) {
+
+  const boxStyle = {
+    backgroundColor: `rgb(${r}, ${g}, ${b})`
+  };
+
+  return (
+    <div className="box-color" style={boxStyle}>
+      rgb({r}, {g}, {b})
+    </div>
+  );
+}
+
+export default BoxColor;

src/components/Greetings.jsx

@@ -0,0 +1,23 @@
+import "../App.css"
+
+function Greetings({ lang, children }) {
+  let greeting = "";
+
+  if (lang === "de") {
+    greeting = "Hallo";
+  } else if (lang === "en") {
+    greeting = "Hello";
+  } else if (lang === "es") {
+    greeting = "Hola";
+  } else if (lang === "fr") {
+    greeting = "Bonjour";
+  }
+
+  return (
+    <p className="greetings">
+      {greeting} {children}
+    </p>
+  );
+}
+
+export default Greetings;

src/components/IdCard.jsx

@@ -0,0 +1,21 @@
+import "../App.css"
+
+function IdCard(props) {
+  return (
+    <div className="userDiv">
+
+      <img src={props.picture}/>
+
+      <div>
+        <p><strong>First name:</strong> {props.firstName}</p>
+        <p><strong>Last name:</strong> {props.lastName}</p>
+        <p><strong>Gender:</strong> {props.gender}</p>
+        <p><strong>Height:</strong> {props.height / 100}m</p>
+        <p><strong>Birth:</strong> {props.birth.toDateString()}</p>
+      </div>
+
+    </div>
+  );
+}
+
+export default IdCard;

src/components/Random.jsx

@@ -0,0 +1,15 @@
+import "../App.css";
+
+function Random({ min, max }) {
+
+  const randomNumber =
+    Math.floor(Math.random() * (max - min + 1)) + min;
+
+  return (
+    <p className="random">
+      Random value between {min} and {max} =&gt; {randomNumber}
+    </p>
+  );
+}
+
+export default Random;