Done Cesar Galan

src/App.jsx

@@ -1,10 +1,73 @@
 import "./App.css";
+import IdCard from "./components/IdCard";
+import Greetings from "./components/Greetings";
+import Random from "./components/Random";
+import BoxColor from "./components/BoxColor";
+import CreditCard from "./components/CreditCard";
 
 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} />
+
+      <CreditCard
+        type="Visa"
+        number="0123456789018845"
+        expirationMonth={3}
+        expirationYear={2021}
+        bank="BNP"
+        owner="Maxence Bouret"
+        bgColor="#11aa99"
+        color="white"
+      />
+
+      <CreditCard
+        type="Master Card"
+        number="0123456789010995"
+        expirationMonth={3}
+        expirationYear={2021}
+        bank="N26"
+        owner="Maxence Bouret"
+        bgColor="#eeeeee"
+        color="#222222"
+      />
+
+      <CreditCard
+        type="Visa"
+        number="0123456789016984"
+        expirationMonth={12}
+        expirationYear={2019}
+        bank="Name of the Bank"
+        owner="Firstname Lastname"
+        bgColor="#ddbb55"
+        color="white"
+      />
+    </>
   );
 }
 

src/components/BoxColor.jsx

@@ -0,0 +1,27 @@
+
+function BoxColor({ r, g, b }) {
+
+  const colorRgb = `rgb(${r}, ${g}, ${b})`;
+
+  const boxStyle = {
+    backgroundColor: colorRgb,
+    width: '80%',
+    height: '100px',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: 'black', 
+    border: '1px solid black',
+    margin: '10px 0',
+    fontWeight: 'bold'
+  };
+
+  return (
+    <div style={boxStyle}>
+      <span>rgb({r}, {g}, {b})</span>
+    </div>
+  );
+}
+
+export default BoxColor;

src/components/CreditCard.css

@@ -0,0 +1,48 @@
+.card {
+    padding: 15px;
+    border-radius: 15px;
+    display: inline-block;
+    margin: 20px;
+    width: 400px;
+    height: 180px;
+    position: relative;
+}
+
+.logo {
+    position: absolute;
+    height: 80px;
+    width: 80px;
+    right: 25px;
+    top: 0px;
+}
+
+.logo img {
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
+}
+
+.card-number {
+    font-size: 40px;
+    position: absolute;
+    top: 15%;
+    right: 10%;
+    width: 80%;
+}
+
+.card-data {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 15px; 
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start; 
+}
+
+.card-data p {
+  margin: 0; 
+  line-height: 1.6; 
+  font-size: 18px;
+  font-weight: bold;
+}

src/components/CreditCard.jsx

@@ -0,0 +1,33 @@
+import "./CreditCard.css";
+import visaImg from '../assets/images/visa.png';
+import masterCardImg from '../assets/images/master-card.svg';
+
+function CreditCard({type, number,expirationMonth,expirationYear,bank,owner, bgColor, color}) {
+
+  const cardStyle = {
+    backgroundColor: bgColor,
+    color: color,
+  };
+
+  const formattedNumber = `•••• •••• •••• ${number.slice(-4)}`;
+
+
+  return (
+    <div className="card" style={cardStyle}>
+      <div className="logo">
+        <img src={type === "Visa" ? visaImg : masterCardImg} alt="" />
+      </div>
+
+      <p className="card-number">{formattedNumber}</p>
+
+      <div className="card-data">
+        <p>
+          Expires{expirationMonth}/{expirationYear} <span>{bank}</span>
+        </p>
+        <p>{owner}</p>
+      </div>
+    </div>
+  );
+}
+
+export default CreditCard;

src/components/Greetings.css

@@ -0,0 +1,3 @@
+.greet-message {
+    border: 1px solid;
+}

src/components/Greetings.jsx

@@ -0,0 +1,13 @@
+import "./Greetings.css";
+
+const Greetings = ({ lang, children }) => {
+  const greetingsMap = { de: "Hallo", en: "Hello", es: "Hola", fr: "Bonjour" };
+
+  return (
+    <p className="greet-message">
+      {greetingsMap[lang]} {children}
+    </p>
+  );
+};
+
+export default Greetings;

src/components/IdCard.css

@@ -0,0 +1,14 @@
+.id-card {
+    display: flex;
+    border: 1px solid;
+    margin-bottom: 15px;
+    align-items: center;
+}
+
+.id-card img {
+    height: 95%;
+    width: 80%;
+    object-fit: contain;
+    margin-right: 100px;
+    margin-left: 15px;
+}

src/components/IdCard.jsx

@@ -0,0 +1,31 @@
+import "./IdCard.css";
+
+function IdCard({ lastName, firstName, gender, height, birth, picture }) {
+  return (
+    <div className="id-card">
+      <div>
+        <img src={picture} alt="" />
+      </div>
+
+      <div className="data">
+        <p>
+          <b>First Name:</b> {firstName}
+        </p>
+        <p>
+          <b>Last Name:</b> {lastName}
+        </p>
+        <p>
+          <b>Gender:</b> {gender}
+        </p>
+        <p>
+          <b>Height:</b> {height}
+        </p>
+        <p>
+          <b>Birth:</b> {birth.toDateString()}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default IdCard;

src/components/Random.css

@@ -0,0 +1,4 @@
+.random-box {
+    border: 1px solid black;
+    margin: 10px;
+}

src/components/Random.jsx

@@ -0,0 +1,15 @@
+import './Random.css'
+
+function Random ({min, max}) {
+   const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
+
+  return (
+    <div className="random-box">
+      <p>
+        Número aleatorio entre {min} y {max}: <strong>{randomNumber}</strong>
+      </p>
+    </div>
+  );
+}
+
+export default Random;