WDPT2023-PABLO LUIS VILLALBA CASADO

.eslintrc.cjs

@@ -11,5 +11,6 @@ module.exports = {
   plugins: ['react-refresh'],
   rules: {
     'react-refresh/only-export-components': 'warn',
+    'react/prop-types' : false
   },
 }

src/App.css

@@ -35,4 +35,80 @@
   to {
     transform: rotate(360deg);
   }
+
 }
+
+.card1 {
+  background-color: #11aa99;
+  color: white;
+  width: 300px;
+  height: 150px;
+  border-radius: 10px;
+  margin-top: 15px;
+  display: flex;
+  margin-right: 15px;
+
+
+}
+
+.card2 {
+  background-color: #eeeeee;
+  color: #222222;
+  width: 300px;
+  height: 150px;
+  border-radius: 10px;
+  margin-top: 15px;
+  display: flex;
+  margin-right: 15px;
+
+}
+
+.card3 {
+  background-color: #ddbb55;
+  color: white;
+  width: 300px;
+  height: 150px;
+  border-radius: 10px;
+  margin-top: 15px;
+  display: flex;
+
+}
+
+.creditCard {
+  display: flex;
+  flex-direction:column;
+  justify-content: center;
+
+
+}
+
+.number {
+  margin-left: 50px;
+}
+
+.cards {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+}
+
+.driverCard {
+  background-color: #4d6089;
+  color: white;
+  max-width: 700px;
+  border-radius: 40px;
+  max-height: 157px;
+
+}
+
+.imgDriver {
+  width: 80px;
+  border-radius: 50px;
+  margin-left: 150px;
+
+}
+
+.imgDriver {
+  display: flex;
+}

src/App.jsx

@@ -1,10 +1,120 @@
 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} />
+
+    <div>
+      <BoxColor r={255} g={0} b={0} /> {/* Rojo */}
+      <BoxColor r={0} g={255} b={0} /> {/* Verde */}
+      <BoxColor r={0} g={0} b={255} /> {/* Azul */}
+    </div>
+    <div className="cards">
+    <div className="card1">
+    <CreditCard
+  type="Visa"
+  number="•••• •••• ••••8845"
+  expirationMonth={3}
+  expirationYear={2021}
+  bank="BNP"
+  owner="Maxence Bouret"
+  bgColor="#11aa99"
+  color="white" 
+/>
+</div>
+    <div className="card2">
+<CreditCard
+  type="Master Card"
+  number="•••• •••• •••• 0995"
+  expirationMonth={3}
+  expirationYear={2021}
+  bank="N26"
+  owner="Maxence Bouret"
+  bgColor="#eeeeee"
+  color="#222222"
+/>
+</div>
+
+<div className="card3">    
+<CreditCard
+  type="Visa"
+  number="•••• •••• •••• 6984"
+  expirationMonth={12}
+  expirationYear={2019}
+  bank="Name of the Bank"
+  owner="Firstname Lastname"
+  bgColor="#ddbb55"
+  color="white" 
+/>
+
+</div>
+
+</div>
+<div>
+      <Rating>0</Rating>
+      <Rating>1.49</Rating>
+      <Rating>1.5</Rating>
+      <Rating>3</Rating>
+      <Rating>4</Rating>
+      <Rating>5</Rating>
+    </div>
+
+    <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>
     </div>
+
+
   );
 }
 

src/Components/BoxColor.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+const BoxColor = ({r, g, b}) => {
+    const validarValorColor = (valor) => {
+        return Math.max(0, Math.min(valor, 255));
+      };
+
+      const rojo = validarValorColor(r);
+      const verde = validarValorColor(g);
+      const azul = validarValorColor(b);
+
+      const estiloCaja = {
+        backgroundColor: `rgb(${rojo}, ${verde}, ${azul})`,
+        width: '500px',
+        height: '100px',
+        border: '1px solid #000', // Opcional: Agregar un borde negro para una mejor visibilidad
+      };
+
+      return (
+        <div style={estiloCaja}>
+
+        </div>
+      );
+    };
+
+    export default BoxColor;

src/Components/CreditCard.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const CreditCard = ({type, number, expirationMonth, expirationYear, bank, owner, bgColor, color}) => {
+    return (
+        <div className='creditCard'>
+
+        <div className='number'>
+
+        <h3>{number}</h3>
+
+        </div>
+
+        <div className='expiration'>
+        {`${expirationMonth}/${expirationYear} ${bank}`}
+
+        </div>
+        <div className='owner'>
+        {owner}
+        </div>
+
+
+
+
+        </div>
+    );
+};
+
+export default CreditCard;

src/Components/DriverCard.jsx

@@ -0,0 +1,21 @@
+
+const DriverCard = ({name, rating, img, car}) => {
+    return (
+        <div className="driverCard">
+
+
+<img className="imgDriver" src={img}/>
+        {name}
+        {rating}
+
+
+        <p>{`${car.model} - ${car.licensePlate}`}</p>
+
+
+
+        </div>
+    );
+};
+
+export default DriverCard;
+

src/Components/Greetings.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const GREETINGS_MAP = {
+  de: name => `Hallo ${name}!`,
+  en: name => `Hello ${name}!`,
+  es: name => `¡Hola ${name}!`,
+  fr: name => `Bonjour ${name}!`,
+};
+
+const Greetings = ({ lang, children }) => {
+  const getGreeting = GREETINGS_MAP[lang] || GREETINGS_MAP.en;
+  const greetingText = getGreeting(children);
+
+  return (
+    <div>
+      <p>{greetingText}</p>
+    </div>
+  );
+};
+
+export default Greetings;

src/Components/IdCard.jsx

@@ -0,0 +1,30 @@
+function IdCard(props) {
+    const { lastName, firstName, gender, height, birth, picture } = props;
+    return (
+        <div className="idCard">
+          <div className="avatar">
+            <img src={picture} alt={`${firstName} ${lastName}`} />
+          </div>
+          <div className="info">
+            <div className="dataCard">
+              <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.toString()}
+              </p>
+            </div>
+          </div>
+        </div>
+      );
+    }
+export default IdCard;

src/Components/Random.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+
+const Random = ({min, max}) => {
+    const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
+
+    return (
+        <div className="card mb-3">
+            <h2>Random value between {min} and {max} ⭢ {randomNumber}</h2>
+        </div>
+    )
+}
+
+export default Random

src/Components/Rating.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Rating = ({ children }) => {
+  const valorRating = Math.min(Math.max(parseFloat(children), 0), 5);
+
+  const estrellasLlenas = Math.ceil(valorRating);
+
+  const estrellas = Array.from({ length: 5 }, (_, index) => {
+    if (index < estrellasLlenas) {
+      return '★';
+    } else {
+      return '☆';
+    }
+  });
+
+  return (
+    <div>
+      {estrellas.map((estrella, index) => (
+        <span key={index}>{estrella}</span>
+      ))}
+    </div>
+  );
+};
+
+export default Rating;