Jaume Girbau Barriuso - lab-react-props-training

src/App.css

@@ -0,0 +1,11 @@
+.App {
+  padding: 20px;
+}
+
+.box-color {
+  border: 1px solid black;
+  margin: 20px 0;
+  padding: 40px 20px;
+  text-align: center;
+  font-size: 32px;
+}

src/App.jsx

@@ -1,11 +1,15 @@
-import "./App.css";
+import './App.css';
+import BoxColor from './components/BoxColor';
 
 function App() {
   return (
     <div className="App">
-      <h1> LAB | React Training</h1>
+      <h1>LAB | React Training</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,24 @@
+function BoxColor(props) {
+  const hexColor =
+    '#' +
+    props.r.toString(16).padStart(2, '0') +
+    props.g.toString(16).padStart(2, '0') +
+    props.b.toString(16).padStart(2, '0');
+
+  const textColor = props.r + props.g + props.b < 382 ? 'white' : 'black';
+
+  return (
+    <div
+      className="box-color"
+      style={{
+        backgroundColor: `rgb(${props.r}, ${props.g}, ${props.b})`,
+        color: textColor,
+      }}
+    >
+      <p>rgb({props.r},{props.g},{props.b})</p>
+      <p>{hexColor}</p>
+    </div>
+  );
+}
+
+export default BoxColor;

src/components/Greetings.jsx

@@ -0,0 +1,18 @@
+function Greetings(props) {
+    let sayHello = "";
+
+    if (props.lang === 'de') {
+        sayHello = 'Hallo';
+    } else if (props.lang === 'en') {
+        sayHello = "Hello";
+    } else if (props.lang === 'es') {
+        sayHello = "Hola";
+    } else if (props.lang === 'fr') {
+        sayHello = 'Bonjour';
+    }
+    return <p>{sayHello} {props.children}</p>
+}
+
+export default Greetings;
+
+

src/components/IdCard.jsx

@@ -0,0 +1,23 @@
+function IsCards() {
+    return (
+        <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"
+            />
+        </div>
+    )
+}

src/components/Random.jsx

@@ -0,0 +1,6 @@
+function Random(props){
+    const randomNumber = Math.floor(Math.random()*(props.max - props.min + 1)) + props.min;
+
+    return
+    <p>Random value between {props.min} and {props.max} =&gt {randomNumber}</p>
+}