Solved lab

src/App.jsx

@@ -1,11 +1,43 @@
 import "./App.css";
+import IdCard from "./components/IdCard.jsx";
+import Greetings from "./components/Greetings.jsx";
+import Random from "./components/Random.jsx";
+import BoxColor from "./components/BoxColor.jsx";
 
 function App() {
   return (
     <div className="App">
-      <h1> LAB | React Training</h1>
+      <h1>IdCard</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"
+      />
+
+      <h1>Greetings</h1>
+      <Greetings lang="de">Ludwig</Greetings>
+      <Greetings lang="fr">François</Greetings>
+
+      <h1>Random</h1>
+      <Random min={1} max={6}/>
+      <Random min={1} max={100}/>
+
+      <h1>BoxColor</h1>
+      <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,28 @@
+import React from 'react';
+
+const BoxColor = ({ r, g, b }) => {
+  const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+  const color = `rgb(${r},${g},${b})`;
+
+  const boxStyle = {
+    backgroundColor: color,
+    color: r + g + b > 400 ? 'black' : 'white',
+    height: '100px',
+    margin: '10px',
+    border: '1px solid black',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    fontWeight: 'bold'
+  };
+
+  return (
+    <div style={boxStyle}>
+      <span>{color}</span>
+      <span>{hex}</span>
+    </div>
+  );
+};
+
+export default BoxColor;

src/components/CreditCard.jsx

@@ -0,0 +1,13 @@
+function CreditCard(props) {
+  return (
+    <div style={{ backgroundColor: props.bgColor, color: props.color, margin: '10px', padding: '10px' }}>
+      <p>{props.type}</p>
+      {/* Show only last 4 digits */}
+      <p>•••• •••• •••• {props.number.slice(-4)}</p>
+      <p>Expires: {props.expirationMonth}/{props.expirationYear} {props.bank}</p>
+      <p>{props.owner}</p>
+    </div>
+  );
+}
+
+export default CreditCard;

src/components/Greetings.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const Greetings = ({ lang, children }) => {
+  const greetings = { de: 'Hallo', en: 'Hello', es: 'Hola', fr: 'Bonjour' };
+
+  const greenStyle = {
+    backgroundColor: '#d4edda',
+    color: '#155724',
+    border: '1px solid #c3e6cb',
+    padding: '10px',
+    margin: '10px',
+    borderRadius: '4px',
+    fontSize: '20px'
+  };
+
+  return (
+    <div style={greenStyle}>
+      {greetings[lang] || 'Hello'} {children}
+    </div>
+  );
+};
+
+export default Greetings;

src/components/IdCard.jsx

@@ -0,0 +1,24 @@
+function IdCard(props) {
+  return (
+    // We use a div to wrap everything so it stays together
+    <div style={{ border: '1px solid black', margin: '10px', display: 'flex', padding: '5px' }}>
+
+      {/* 1. Show the image using the 'picture' prop */}
+      <img src={props.picture} alt="profile" />
+
+      {/* 2. Show the text info next to the image */}
+      <div style={{ marginLeft: '10px' }}>
+        <p><b>First name:</b> {props.firstName}</p>
+        <p><b>Last name:</b> {props.lastName}</p>
+        <p><b>Gender:</b> {props.gender}</p>
+        <p><b>Height:</b> {props.height / 100}m</p>
+
+        {/* Dates need .toDateString() or they will look like a mess of numbers! */}
+        <p><b>Birth:</b> {props.birth.toDateString()}</p>
+      </div>
+
+    </div>
+  );
+}
+
+export default IdCard;

src/components/Random.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const Random = ({ min, max }) => {
+  const randomValue = Math.floor(Math.random() * (max - min + 1) + min);
+
+  const greenStyle = {
+    backgroundColor: '#d4edda',
+    color: '#155724',
+    border: '1px solid #c3e6cb',
+    padding: '10px',
+    margin: '10px',
+    borderRadius: '4px',
+    fontSize: '20px'
+  };
+
+  return (
+    <div style={greenStyle}>
+      Random value between {min} and {max} ={'>'} {randomValue}
+    </div>
+  );
+};
+
+export default Random;