[REM-PT-122023] Raquel Melo

src/App.jsx

@@ -1,10 +1,109 @@
 import "./App.css";
-
+import IdCard from "../src/assets/components/Card/Card";
+import Greetings from "./assets/components/Greetings/Greetings";
+import Random from "./assets/components/Random/Random";
+import BoxColor from "./assets/components/BoxColor/BoxColor";
+import CreditCard from "./assets/components/CreditCard/CreditCard"; 
+import Rating from "./assets/components/Rating/Rating";
+import DriverCard from "./assets/components/DiverCard/DriverCard";
 function App() {
   return (
     <div className="App">
       <h1> LAB | React Training</h1>
+      <h1>IdCards</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="swe">Ludwig</Greetings>
+        <Greetings lang="fr">François</Greetings>
+
+      <h1>Random Number</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} />
+
+      <h1>Credit Card</h1>
+      <div className="credit-card-container">
+        <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>
+      <h1>Rating</h1>
+        <Rating>0</Rating>
+        <Rating>1.49</Rating>
+        <Rating>1.5</Rating>
+        <Rating>3</Rating>
+        <Rating>4</Rating>
+        <Rating>5</Rating>
+
+    <h1>Drive Card</h1>
+    <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/assets/components/BoxColor/BoxColor.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import '../Greetings/Greetings.css'
+
+function BoxColor ({ r, g, b}) {
+
+    const clamp = (value) => Math.min(255, Math.max(0, value));
+
+    const backgroundColor = `rgb(${clamp(r)}, ${clamp(g)}, ${clamp(b)})`;
+
+    return  (
+        <div className="text-box" style={{ backgroundColor }}>
+            <p>RGB: {r}, {g}, {b}</p>
+        </div>
+      );
+}
+
+export default BoxColor;

src/assets/components/Card/Card.css

@@ -0,0 +1,17 @@
+.id-card {
+    display: flex;
+    border: 3px solid black;
+    padding: 5px;
+    margin: 10px;
+  }
+
+ .info-card {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    margin-left: 5px;
+ }
+
+ .info-card p {
+    margin: 5px 0; 
+  }

src/assets/components/Card/Card.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import './Card.css';
+
+function IdCard (props) {
+ const { lastName, firstName, gender, height, birth, picture } = props;
+    return (
+        <div className="id-card">
+            <div className="avatar">
+                <img src={picture} alt={`${firstName} ${lastName}`} />   
+            </div>         
+            <div className="info-card">
+                <p><strong>Last Name:</strong> {lastName}</p>
+                <p><strong>First Name:</strong> {firstName}</p>
+                <p><strong>Gender:</strong> {gender}</p>
+                <p><strong>Height:</strong> {height} cm</p>
+                <p><strong>Birth:</strong> {birth.toDateString()}</p>
+            </div>
+        </div>
+    );
+};
+
+export default IdCard;

src/assets/components/CreditCard/CreditCard.css

@@ -0,0 +1,44 @@
+.credit-card {
+    width: 300px;
+    height: 180px;
+    border-radius: 15px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .card-logo {
+    width: 60px;
+    margin-bottom: 10px;
+    margin-left: 220px; 
+  }
+
+  .card-number {
+    font-size: 30px;
+  }
+
+  .card-info {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .card-info-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 5px;
+  }
+
+  .info-label {
+    font-weight: bold;
+  }
+
+  .info-value {
+    font-style: italic;
+  }
+
+  .credit-card-container {
+    display: flex;
+    margin: 20px;
+}

src/assets/components/CreditCard/CreditCard.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import './CreditCard.css';
+import visaLogo from '../../images/visa.png';
+import masterCardLogo from '../../images/master-card.svg';
+
+function CreditCard({
+    type,
+    number,
+    expirationMonth,
+    expirationYear,
+    bank,
+    owner,
+    bgColor,
+    color,
+}) {
+    const cardLogo = type === 'Visa' ? visaLogo : masterCardLogo;
+    const lastFourDigits = number.slice(-4);
+
+    return (
+        <div className="credit-card-container">
+            <div className="credit-card" style={{ backgroundColor: bgColor, color: color }}>
+                <img src={cardLogo} alt="Card Logo" className="card-logo" />
+                <div className="card-number">•••• •••• •••• {lastFourDigits}</div>
+                <div className="card-info">
+                    <div className="card-info-row">
+                        <span className="info-label">Expires</span>
+                        <span className="info-value">
+                            {expirationMonth.toString().padStart(2, '0')}/{expirationYear.toString().slice(-2)}
+                        </span>
+                    </div>
+                    <div className="card-info-row">
+                        <span className="info-label">Bank</span>
+                        <span className="info-value">{bank}</span>
+                    </div>
+                    <div className="card-info-row">
+                        <span className="info-label">Owner</span>
+                        <span className="info-value">{owner}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default CreditCard;
+

src/assets/components/DiverCard/DriverCard.css

@@ -0,0 +1,29 @@
+.driver-card {
+    display: flex;
+    padding: 5px;
+    margin: 10px;
+    background-color: rgb(111, 111, 236);
+    color: white;
+    border-radius: 10px;
+    width: 500px;
+    align-items: center;
+}
+
+.info-driver {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    margin-left: 5px;
+}
+
+.info-driver p {
+    margin: 5px 0; 
+}
+
+.driver-card img {
+    margin-left: 100px;
+    padding: 10px;
+    width: 100px;
+    height: 100px;
+    border-radius: 100%;
+}

src/assets/components/DiverCard/DriverCard.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import './DriverCard.css';
+
+const DriverCard = (props) => {
+    const { name, rating, img, car } = props;
+    const value = Math.round(rating);
+    const stars = [];
+
+    for (let i = 0; i < 5; i++) {
+        if (i < value) {
+            stars.push('★');
+        } else {
+            stars.push('☆');
+        }
+    }
+
+    return (
+        <div className='driver-card'>
+            <img src={img} alt={name} />
+            <div className='info-driver'>
+                <p><strong>{name}</strong></p>
+                <div>
+                    {stars.map((star, index) => (
+                        <span key={index}>{star}</span>
+                    ))}
+                </div>
+                <p>{car.model} - {car.licensePlate}</p>
+            </div>
+        </div>
+    );
+};
+
+export default DriverCard;
+

src/assets/components/Greetings/Greetings.css

@@ -0,0 +1,7 @@
+.text-box {
+    display: flex;
+    border: 3px solid black;
+    padding: 5px;
+    margin: 10px;
+  }
+

src/assets/components/Greetings/Greetings.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import './Greetings.css';
+
+function Greetings (props) {
+    let greeting = "";
+    const { lang, children } = props;
+    switch (lang) {
+        case "de":
+            greeting = "Hallo";
+            break;
+        case "en": 
+            greeting = "Hello";
+            break;
+        case "es":
+            greeting = "Hola";
+            break;
+        case "fr":
+            greeting = "Bonjour";
+            break;
+        default:
+            greeting = "Sorry, I don't know your language";
+    }
+
+    return (
+
+        <div className="text-box">
+            <p>{greeting} {children}</p>
+        </div>
+    )
+}
+
+export default Greetings;

src/assets/components/Random/Random.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import '../Greetings/Greetings.css'
+function Random ({ min, max }) {
+    const randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
+    return  (
+        <div className="text-box">
+          <p>Random Number between {min} and {max} is {randomNum}</p>
+        </div>
+      );
+}
+
+export default Random;