Implement all iterations - Enrique Victorero - LAB | React Props Training

src/App.css

@@ -0,0 +1,100 @@
+h1 {
+    margin: 10px;
+    padding: 5px;
+    display: flex;
+    justify-content: center;
+    border: 2px solid black;
+}
+
+.id-card {
+  display: flex;
+  gap: 10px;
+  align-items: start;
+  border: 2px solid black;
+  margin: 10px;
+  padding: 5px;
+  line-height: 0.4rem;
+}
+
+.greetings {
+    border: 2px solid black;
+    margin: 10px;
+    padding: 5px;
+    font-size: 1.3rem;
+}
+
+.random {
+    border: 2px solid black;
+    margin: 10px;
+    padding: 5px;
+    font-size: 1.3rem;
+}
+
+.box-color {
+    margin: 10px;
+    padding: 5px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 0;
+    border: 2px solid black;
+}
+
+.credit-card {
+    border-radius: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    width: 30vw;
+    height: 25vh;
+    margin: 10px;
+    padding: 20px;
+}
+
+.credit-card p {
+    margin: 0;
+}
+
+.credit-card-row {
+    display: flex;
+}
+
+.star-container {
+    margin: 10px;
+}
+
+.rating {
+  --star-size: 30px;
+  --star-color: royalblue; /* Empty star color */
+  --star-background: white; /* Filled star color */
+
+  display: block;
+  font-size: var(--star-size);
+  line-height: 1;
+}
+
+.rating::before {
+  content: '★★★★★';
+  letter-spacing: 3px;
+  -webkit-text-stroke: 2px white;
+  background: linear-gradient(90deg, 
+    var(--star-background) var(--percent), 
+    var(--star-color) var(--percent)
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.driver-card {
+    margin: 10px;
+    padding: 10px;
+    background-color: royalblue;
+    color: white;
+    border-radius: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+}

src/App.jsx

@@ -1,9 +1,107 @@
 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";
+import Rating from "./components/Rating";
+import DriverCard from "./components/DriverCard";
 
 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 className="credit-card-row">
+        <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" 
+        />
+      </div>
+
+      <div className="star-container">
+        <Rating>0</Rating>
+        <Rating>1.49</Rating>
+        <Rating>1.5</Rating>
+        <Rating>3</Rating>
+        <Rating>4</Rating>
+        <Rating>5</Rating>
+      </div>
+
+      <DriverCard
+        name="Travis Kalanick"
+        rating={4.2}
+        img="https://si.wsj.net/public/resources/images/BN-TY647_37gql_OR_20170621052140.jpg?width=620&height=428"
+        car={{
+          model: "Toyota Corolla Altis",
+          licensePlate: "CO42DE"
+        }}
+      />
+
+      <DriverCard
+        name="Dara Khosrowshahi"
+        rating={4.9}
+        img="https://ubernewsroomapi.10upcdn.com/wp-content/uploads/2017/09/Dara_ELT_Newsroom_1000px.jpg"
+        car={{
+          model: "Audi A3",
+          licensePlate: "BE33ER"
+        }}
+      />
+
     </div>
   );
 }

src/components/ CreditCard.jsx

@@ -0,0 +1,22 @@
+function CreditCard ({type, number, expirationMonth, expirationYear, bank, owner,
+    bgColor, color
+}) {
+    const typeImages = {
+        "Visa": "../../public/visa.png",
+        "Master Card": "../../public/master-card.svg"
+    }
+
+    return (
+        <div className="credit-card" style={{backgroundColor: bgColor, color: color}}>
+            <img src={typeImages[type]} alt="credit card logo" style={{alignSelf: "end", width: "70px"}}/>
+            <h2>•••• •••• •••• {number.slice(12)}</h2>
+            <div style={{alignSelf: "start", display:"flex", flexDirection: "column",
+                 justifyContent:"end", gap:0}}>
+                <p>Expires {expirationMonth}/{expirationYear} {bank}</p>
+                <p>{owner}</p>
+            </div>
+        </div>
+    )
+}
+
+export default CreditCard;

src/components/BoxColor.jsx

@@ -0,0 +1,12 @@
+function BoxColor ({r, g, b}) {
+    const toHex = (c) => c.toString(16).padStart(2, '0');
+
+    return (
+        <div className="box-color" style={{backgroundColor:`rgb(${r}, ${g}, ${b})`}}>
+            <h3>rgb({r}, {g}, {b})</h3>
+            <h3>#{toHex(r)}{toHex(g)}{toHex(b)}</h3>
+        </div>
+    )
+}
+
+export default BoxColor;

src/components/DriverCard.jsx

@@ -0,0 +1,17 @@
+import Rating from "./Rating";
+
+function DriverCard ({name, rating, img, car}) {
+    return (
+        <div className="driver-card">
+            <img src={img} alt="Driver profile picture" style={{height: "100px", width: "100px",
+                borderRadius:"50%", objectFit:"cover"}}/>
+            <div style={{width: "20%"}}>
+                <h3>{name}</h3>
+                <Rating >{rating}</Rating>
+                <p>{car.model} - {car.licensePlate}</p>
+            </div>
+        </div>
+    )
+}
+
+export default DriverCard;

src/components/Greetings.jsx

@@ -0,0 +1,14 @@
+function Greetings ({lang, children}) {
+    const helloString = {
+        de: "Hallo",
+        en: "Hello",
+        es: "Hola",
+        fr: "Bonjour"
+    }
+
+    return (
+        <div className="greetings" >{helloString[lang]} {children}</div>
+    )
+}
+
+export default Greetings;

src/components/IdCard.jsx

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

src/components/Random.jsx

@@ -0,0 +1,9 @@
+function Random ({min, max}) {
+    const randNumber = Math.floor(Math.random() * max + min);
+
+    return (
+        <div className="random">Random value between {min} and {max} &rArr; {randNumber}</div>
+    )
+}
+
+export default Random;

src/components/Rating.jsx

@@ -0,0 +1,12 @@
+function Rating ({children}) {
+    const ratingValue = parseFloat(children);
+    const percentage = (ratingValue / 5) * 100;
+
+    return (
+        <div className="rating" style={{ '--percent': `${percentage}%` }}>
+
+        </div>
+    )
+}
+
+export default Rating;

src/index.css

@@ -10,4 +10,4 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
-}
+}