done

package.json

@@ -10,8 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "bootstrap": "^5.3.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "reactstrap": "^9.2.3",
+    "sas": "^3.0.4"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

src/App.jsx

@@ -1,9 +1,102 @@
+/* eslint-disable react/no-children-prop */
 import "./App.css";
+import BoxColor from "./components/BoxColor/BoxColor";
+import Greetings from "./components/Greeting/Greetings";
+import IdCard from "./components/IdCard/IdCard";
+import Random from "./components/Random/Random";
+import CreditCard from "./components/CreditCard/CreditCard";
+import Rating from "./components/Rating/Rating";
+import DriverCard from "./components/DriverCard/DriverCard";
+import LikeButton from "./components/LikeButton/LikeButton";
+import ClickablePicture from "./components/ClickablePicture/ClickablePicture";
+import Dice from "./components/Dice/Dice";
+import Carousel from "./components/Carousel/Carousel";
+import NumbersTable from "./components/NumbersTable/NumbersTable";
+import FaceBook from "./components/FaceBook/FaceBook";
+import SignupPage from "./components/SignupPage/SignupPage";
+import RGBColorPicker from "./components/RGBColorPicker/RGBColorPicker";
+
 
 function App() {
   return (
     <div className="App">
-      <h1> LAB | React Training</h1>
+      <div>
+        <IdCard
+          picture="https://randomuser.me/api/portraits/men/44.jpg"
+          firstName="John"
+          lastName="Doe"
+          gender="male"
+          height={178}
+          birth={new Date("1992-07-14")}
+        />
+      </div>
+      <div>
+        <Greetings lang="en" children="Ludwig" />
+        <Random min={40} max={90} />
+        <BoxColor r={150} g={100} b={30} />
+      </div>
+      <div>
+        <CreditCard
+          type="visa"
+          number="0123456789018845"
+          expirationMonth={3}
+          expirationYear={2021}
+          bank="BNP"
+          owner="Maxence Bouret"
+          bgColor="#11aa99"
+          color="white"
+        />
+      </div>
+      <div>
+        <Rating>0</Rating>
+        <Rating>1</Rating>
+        <Rating>2</Rating>
+        <Rating>3</Rating>
+        <Rating>4</Rating>
+        <Rating>5</Rating>
+      </div>
+      <div>
+        <DriverCard
+          name="Travis Kalanick"
+          rating={<Rating>4.2</Rating>}
+          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",
+          }}
+        />
+      </div>
+      <div>
+        <LikeButton />
+      </div>
+      <div>
+        <ClickablePicture />
+      </div>
+      <div>
+        <Dice />
+      </div>
+      <div>
+        <Carousel
+        images={[
+          "https://randomuser.me/api/portraits/women/1.jpg",
+          "https://randomuser.me/api/portraits/men/1.jpg",
+          "https://randomuser.me/api/portraits/women/2.jpg",
+          "https://randomuser.me/api/portraits/men/2.jpg"
+        ]} />
+      </div>
+      <div>
+      <NumbersTable limit={12} />
+      </div>
+      <div>
+        <FaceBook />
+      </div>
+      <div>
+        <SignupPage />
+      </div>
+
+      <RGBColorPicker />
+
+
     </div>
   );
 }

src/components/BoxColor/BoxColor.css

@@ -0,0 +1,5 @@
+.rectangulo{
+    width: 500px;
+    height: 50px;
+    background-color: red;
+}

src/components/BoxColor/BoxColor.jsx

@@ -0,0 +1,14 @@
+import './BoxColor.css'
+
+function BoxColor ({r,g,b}){
+    if (r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255){
+        const rgbColor = `rgb(${r}, ${g}, ${b})`;
+    return(
+        <div className="rectangulo" style={{ backgroundColor:rgbColor}}>
+            <p>{rgbColor}</p>
+        </div>
+
+        )
+    }
+}
+export default BoxColor

src/components/Carousel/Carousel.css

@@ -0,0 +1,4 @@
+.container1{
+    display: flex;
+    flex-direction: row;
+}

src/components/Carousel/Carousel.jsx

@@ -0,0 +1,34 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/prop-types */
+import React, { useState } from "react";
+
+function Carousel({ images }) {
+  const [imageOn, setImageOn] = useState(0);
+
+  const imageLeft = () => {
+    setImageOn((prevImg) => {
+      if (prevImg === 0) {
+        return images.length - 1;
+      }
+      return prevImg - 1;
+    });
+  };
+  const imageRigth = () => {
+    setImageOn((prevImg) => {
+      if (prevImg === images.length - 1) {
+        return 0;
+      }
+      return prevImg + 1;
+    });
+  };
+
+  return (
+    <div className="container1">
+      <button onClick={imageLeft}>left</button>
+      <img src={images[imageOn]} alt="foto de perfil" />
+      <button onClick={imageRigth}>right</button>
+    </div>
+  );
+}
+
+export default Carousel;

src/components/ClickablePicture/ClickablePicture.css

@@ -0,0 +1,24 @@
+.container2{
+display: block;
+position: relative;
+
+
+    .switch {
+
+        position: absolute;
+    top: 48px;
+    left: 623px;
+
+}
+img{
+    cursor: pointer;
+}
+}
+.on {
+    display: block;
+  }
+
+  .off {
+    display: none;
+  }
+

src/components/ClickablePicture/ClickablePicture.jsx

@@ -0,0 +1,21 @@
+
+import glases from '../../assets/images/glasses.png'
+import normal from '../../assets/images/rajoy.jpg'
+import './ClickablePicture.css'
+import { useState } from 'react'
+
+
+function ClickablePicture() {
+    const [glasses, setGlases] = useState(false)
+    const handleClick = () => {
+        setGlases(!glasses)
+      } 
+    return( 
+        <div className='container2'>
+            <img onClick={handleClick}   className={`switch ${glasses ? 'on' : 'off'}`} src= {glases} style={{ width: "100px"}} alt="foto de perfil con gafas" />
+
+            <img  onClick={handleClick}  src= {normal} style={{ width: "300px"}} alt="foto de perfil con gafas" />
+        </div>
+    )
+}
+export default ClickablePicture

src/components/CreditCard/CreditCard.css

@@ -0,0 +1,26 @@
+.card{
+    width: 400px;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid black;
+
+    .tipo{
+        display: flex;
+        justify-content: flex-end;
+
+        img{
+            width: 100px;
+        }
+    }
+
+    .info{
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+    }
+    .titular{
+        display: flex;
+        justify-content: flex-start;
+    }
+
+}

src/components/CreditCard/CreditCard.jsx

@@ -0,0 +1,41 @@
+import './CreditCard.css'
+import visa from '../../assets/images/visa.png'
+import master from '../../assets/images/master-card.svg'
+
+function CreditCard ({type,number,expirationMonth,expirationYear,bank,owner,bgColor,color}){
+    const cardType = (card)=> {
+        if (card === 'visa') {
+            return visa;
+        }
+        return master
+    } ;  
+    const maskCreditCard = (cardNumber) => {
+        const cardString = String(cardNumber);
+        return cardString.slice(0, -4).replace(/./g, '*') + cardString.slice(-4);
+    };
+    const BgColorSelect = `${bgColor}`
+    const colorSelect = `${color}`
+
+
+
+    return(
+        <div className="card" style={{ backgroundColor:BgColorSelect, color:colorSelect}}>
+            <div className='tipo'>
+                <img src={cardType(type)} alt="" />
+            </div>
+            <div className='numero'>
+            <p>{maskCreditCard(number)}</p>
+            </div> 
+            <div className='info'>
+                <p>{expirationMonth}</p>
+                <p>{expirationYear}</p>
+                <p>{bank}</p>
+            </div>
+            <div className='titular'>
+                <p>{owner}</p>
+            </div>
+        </div>
+
+    )
+}
+export default CreditCard

src/components/Dice/Dice.css

@@ -0,0 +1,4 @@
+img{
+    width: 200px;
+    cursor: pointer;
+}

src/components/Dice/Dice.jsx

@@ -0,0 +1,35 @@
+/* eslint-disable no-unused-vars */
+import './Dice.css'
+import React, { useState } from 'react';
+import empty from '../../assets/images/dice-empty.png'
+import dice1 from '../../assets/images/dice1.png'
+import dice2 from '../../assets/images/dice2.png'
+import dice3 from '../../assets/images/dice3.png'
+import dice4 from '../../assets/images/dice4.png'
+import dice5 from '../../assets/images/dice5.png'
+import dice6 from '../../assets/images/dice6.png'
+
+
+
+
+function Dice () {
+    const dados = [empty, dice1, dice2, dice3, dice4, dice5, dice6]
+    const [dado, setDado] = useState(dice3);
+
+   const randomDado = ()=>{
+        setDado(empty)
+        setTimeout(()=>{
+        const randomIndex = Math.floor(Math.random() * 6);
+         setDado(dados[randomIndex])       
+        },1000)
+   }
+
+
+    return(
+        <img onClick={randomDado} src={dado} alt="imagen de un dado" />
+
+    )
+
+}
+
+export default Dice

src/components/DriverCard/DriverCard.css

@@ -0,0 +1,10 @@
+.profileCard{
+    display: flex;
+    flex-direction: row;
+    width: 500px;
+    border: 1px solid black;
+    img{
+        width: 100px;
+    }
+
+}

src/components/DriverCard/DriverCard.jsx

@@ -0,0 +1,19 @@
+/* eslint-disable react/prop-types */
+import './DriverCard.css'
+function DriverCard ({name,rating,img,car}){
+    const { model, licensePlate } = car;
+    return(
+        <div className="profileCard">
+            <div className=''>
+                <img src={img} alt="Foto de perfil" />
+            </div>
+            <div>
+                <p>{name}</p>
+                <p>{rating}</p>
+                <p>{model} - {licensePlate}</p>
+            </div>
+        </div>
+
+    )
+}
+export default DriverCard

src/components/FaceBook/FaceBook.css

@@ -0,0 +1,8 @@
+.containter5{
+    display: flex;
+    flex-direction: row;
+    border: 1px solid black;
+}
+.color{
+    background-color: aqua;
+}