diff --git a/.eslintrc.cjs b/.eslintrc.cjs index ec601b2ce..c7d85695c 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -11,5 +11,6 @@ module.exports = { plugins: ['react-refresh'], rules: { 'react-refresh/only-export-components': 'warn', + 'react/prop-types' : false }, } diff --git a/src/App.css b/src/App.css index 74b5e0534..81796d8a6 100644 --- a/src/App.css +++ b/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; +} \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 98d0f49aa..f20c58ca2 100644 --- a/src/App.jsx +++ b/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 (

LAB | React Training

+ + + + + + Ludwig + François + + + + +
+ {/* Rojo */} + {/* Verde */} + {/* Azul */} +
+
+
+ +
+
+ +
+ +
+ + +
+ +
+
+ 0 + 1.49 + 1.5 + 3 + 4 + 5 +
+ +
+ + + +
+ + ); } diff --git a/src/Components/BoxColor.jsx b/src/Components/BoxColor.jsx new file mode 100644 index 000000000..0b3cd7fdc --- /dev/null +++ b/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 ( +
+ +
+ ); + }; + + export default BoxColor; \ No newline at end of file diff --git a/src/Components/CreditCard.jsx b/src/Components/CreditCard.jsx new file mode 100644 index 000000000..1f2fa2989 --- /dev/null +++ b/src/Components/CreditCard.jsx @@ -0,0 +1,28 @@ +import React from 'react'; + +const CreditCard = ({type, number, expirationMonth, expirationYear, bank, owner, bgColor, color}) => { + return ( +
+ +
+ +

{number}

+ +
+ +
+ {`${expirationMonth}/${expirationYear} ${bank}`} + +
+
+ {owner} +
+ + + + +
+ ); +}; + +export default CreditCard; \ No newline at end of file diff --git a/src/Components/DriverCard.jsx b/src/Components/DriverCard.jsx new file mode 100644 index 000000000..c7c25ad63 --- /dev/null +++ b/src/Components/DriverCard.jsx @@ -0,0 +1,21 @@ + +const DriverCard = ({name, rating, img, car}) => { + return ( +
+ + + + {name} + {rating} + + +

{`${car.model} - ${car.licensePlate}`}

+ + + +
+ ); +}; + +export default DriverCard; + diff --git a/src/Components/Greetings.jsx b/src/Components/Greetings.jsx new file mode 100644 index 000000000..f0e2db193 --- /dev/null +++ b/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 ( +
+

{greetingText}

+
+ ); +}; + +export default Greetings; diff --git a/src/Components/IdCard.jsx b/src/Components/IdCard.jsx new file mode 100644 index 000000000..3458b7a89 --- /dev/null +++ b/src/Components/IdCard.jsx @@ -0,0 +1,30 @@ +function IdCard(props) { + const { lastName, firstName, gender, height, birth, picture } = props; + return ( +
+
+ {`${firstName} +
+
+
+

+ First Name: {firstName} +

+

+ Last Name: {lastName} +

+

+ Gender: {gender} +

+

+ Height: {height} +

+

+ Birth: {birth.toString()} +

+
+
+
+ ); + } +export default IdCard; \ No newline at end of file diff --git a/src/Components/Random.jsx b/src/Components/Random.jsx new file mode 100644 index 000000000..0ba94b0f3 --- /dev/null +++ b/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 ( +
+

Random value between {min} and {max} ⭢ {randomNumber}

+
+ ) +} + +export default Random \ No newline at end of file diff --git a/src/Components/Rating.jsx b/src/Components/Rating.jsx new file mode 100644 index 000000000..6f59321d7 --- /dev/null +++ b/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 ( +
+ {estrellas.map((estrella, index) => ( + {estrella} + ))} +
+ ); +}; + +export default Rating;