[LIS-FT-JULY23] Bruno Cunha

src/App.css

@@ -1,5 +1,8 @@
 .App {
-  text-align: center;
+  margin: 5px;
+  align-items: center;
+  text-align: left;
+  justify-content: center;
 }
 
 .App-logo {
@@ -28,6 +31,138 @@
   color: #61dafb;
 }
 
+.idCard{
+  display: flex;
+  border: 1px solid black;
+  padding: 5px;
+  margin-bottom: 10px;
+}
+
+.idCard-info{
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  margin-left: 5px;
+}
+
+.idCard-info p{
+  margin-left: 5px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.text-box{
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  border: 1px solid black;
+  margin: 10px 0px;
+  padding: 5px;
+  height: 30px;
+}
+
+.box-color{
+  display: flex;
+  border: 1px solid black;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: white;
+  height: 85px;
+  margin-bottom: 5px;
+}
+
+.credit-card{
+  margin: 10px;
+  padding: 20px;
+  width: 300px;
+  height: 150px;
+  border-radius: 10px;
+  display: inline-block;
+}
+
+.credit-card-type{
+  display: flex;
+  justify-content: flex-end;
+  margin: 0px;
+}
+.credit-card-number{
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  align-items: center;
+  font-size: 30px;
+  margin: 20px 0px;  
+}
+.credit-card-date-bank{
+  margin: 0px;
+}
+
+.credit-card-date-bank span{
+  margin-left: 20px;
+}
+
+.credit-card-owner{
+  margin: 0px;
+}
+
+.rate-stars p{
+  font-size: 32px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.driver-card{
+  background-color: #425cbb;
+  border-radius: 10px;
+  color: white;
+  padding: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 10px;
+  height: 120px;
+}
+
+.driver-card-img{
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 5px;
+
+}
+
+.driver-img{
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.driver-info{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  margin-left: 5px;
+}
+
+.driver-info-name{
+  font-size: 24px;
+  margin: 0px;
+}
+
+.driver-info-rating{
+  font-size: 32px;
+  margin: 0px;
+}
+
+.driver-info-car-info{
+  font-size: 16px;
+  margin: 0px;
+}
+
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

src/App.jsx

@@ -1,10 +1,116 @@
 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>
-    </div>
+
+      <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="swe">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} textColor="black" />
+
+
+      <h1>CreditCard</h1>
+        <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" 
+        />
+
+
+      <h1>Rating</h1>
+        <Rating>0</Rating>
+        <Rating>1.49</Rating>
+        <Rating>1.5</Rating>
+        <Rating>3</Rating>
+        <Rating>4</Rating>
+        <Rating>5</Rating>
+
+
+      <h1>DriverCard</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/components/BoxColor.jsx

@@ -0,0 +1,16 @@
+function BoxColor(props){
+    const {r,g,b, textColor} = props;
+
+    const divStyle = {
+        backgroundColor: `rgb(${r},${g},${b})`,
+        color: textColor
+    }
+
+    return (
+    <div className="box-color" style={divStyle}>
+        <p>rgb({r},{g},{b})</p>
+    </div>
+    )
+}
+
+export default BoxColor;

src/components/CreditCard.jsx

@@ -0,0 +1,23 @@
+function CreditCard(props){
+    const {bgColor, color, type, number, expirationMonth, expirationYear, bank, owner} = props;
+
+    const divStyle = {
+        backgroundColor: bgColor,
+        color: color
+    }
+
+    const formattedMonth = expirationMonth < 10 ? `0${expirationMonth}` : expirationMonth;
+
+    const maskedNumber = `•••• •••• •••• ${number.slice(-4)}`
+
+    return(
+        <div className="credit-card" style={divStyle}>
+            <p className="credit-card-type">{type}</p>
+            <p className="credit-card-number">{maskedNumber}</p>
+            <p className="credit-card-date-bank">Expires {formattedMonth}/{expirationYear} <span>{bank}</span></p>
+            <p className="credit-card-owner">{owner}</p>
+        </div>
+    )
+}
+
+export default CreditCard;

src/components/DriverCard.jsx

@@ -0,0 +1,36 @@
+function DriverCard(props){
+    const {img, name, rating, car} = props;
+
+
+    function driverRating(){
+        if (rating <= 0.49) {
+            return "☆☆☆☆☆";
+        } else if (rating <= 1.49) {
+            return "★☆☆☆☆";
+        } else if (rating <= 2.49) {
+            return "★★☆☆☆";
+        } else if (rating <= 3.49) {
+            return "★★★☆☆";
+        } else if (rating <= 4.49) {
+            return "★★★★☆";
+        } else {
+            return "★★★★★";
+        }
+    }
+
+    return(
+        <div className="driver-card">            
+            <div className="driver-card-img">
+                <img className="driver-img" src={img}></img>
+            </div>
+
+            <div className="driver-info">
+                <p className="driver-info-name">{name}</p>
+                <p className="driver-info-rating">{driverRating()}</p>
+                <p className="driver-info-car-info">{car.model} - {car.licensePlate}</p>
+            </div>
+        </div>
+    )
+}
+
+export default DriverCard;

src/components/Greetings.jsx

@@ -0,0 +1,30 @@
+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 dont know how to say hello in your language";
+    }
+
+    return(
+        <div className="text-box">
+          <p>{greeting} {children}</p>  
+        </div>
+    )
+}
+
+export default Greetings;