done

src/App.jsx

@@ -1,10 +1,88 @@
+<<<<<<< HEAD
 import "./App.css";
+import LikeButton from "./components/LikeButton";
+import Counter from "./components/Counter";
+import ClickablePicture from "./components/ClickablePicture";
+import Dice from "./components/Dice";
 
 function App() {
   return (
+    <section>
+
+   <div className="App">
+      <LikeButton />
+      <LikeButton />
+      <LikeButton />
+    </div>
+
+    <div className="App">
+      <Counter />
+      <Counter />
+    </div>
+
     <div className="App">
-      <h1> LAB | React Training</h1>
+      <ClickablePicture
+        img2="http://www.stickpng.com/assets/images/584999937b7d4d76317f5ffd.png"
+      />
+    </div>
+     <div className="App">
+      <Dice />
+    </div>
+
+=======
+import Greetings from "./components/greetings";
+import IdCard from "./components/IdCard";
+import Random from "./components/Random";
+import BoxColor from "./components/BoxColor";
+function App() {
+  return (
+
+
+    <section>
+
+ <div >
+      <BoxColor r={255} g={0} b={0} />
+      <BoxColor r={0} g={255} b={0} />
+      <BoxColor r={0} g={0} b={255} />
+      <BoxColor r={128} g={128} b={128} />
+    </div>
+
+<div>
+      <Greetings lang="de">Ludwig</Greetings>
+      <Greetings lang="en">John</Greetings>
+      <Greetings lang="es">Francisco</Greetings>
+      <Greetings lang="fr">Marie</Greetings>
+
+</div>
+
+<div className="App">
+      <Random min={1} max={6} />
+      <Random min={100} max={200} />
+  </div>
+
+
+
+    <div >
+      <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"
+      />
     </div>
+>>>>>>> 1cffb14c23ce4a8b829ca8e5dcbb01445d67b437
+    </section>
   );
 }
 

src/components/BoxColor.jsx

@@ -0,0 +1,20 @@
+// BoxColor.jsx
+function BoxColor(props) {
+  const { r, g, b } = props;
+
+  const boxStyle = {
+    backgroundColor: `rgb(${r}, ${g}, ${b})`,
+    color: "white",
+    padding: "20px",
+    margin: "10px 0",
+    textAlign: "center"
+  };
+
+  return (
+    <div style={boxStyle}>
+      rgb({r}, {g}, {b})
+    </div>
+  );
+}
+
+export default BoxColor;

src/components/ClickablePicture.jsx

@@ -0,0 +1,20 @@
+import { useState } from "react";
+
+function ClickablePicture({ img1, img2 }) {
+  const [isFirst, setIsFirst] = useState(true);
+
+  function handleClick() {
+    setIsFirst(!isFirst);
+  }
+
+  return (
+    <img
+      src={isFirst ? img1 : img2}
+      alt="clickable"
+      onClick={handleClick}
+      style={{ cursor: "pointer", width: "200px" }}
+    />
+  );
+}
+
+export default ClickablePicture;

src/components/Counter.jsx

@@ -0,0 +1,25 @@
+import { useState } from "react";
+
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  function increase() {
+    setCount(count + 1);
+  }
+
+  function decrease() {
+    if (count > 0) {
+      setCount(count - 1);
+    }
+  }
+
+  return (
+    <div>
+      <button onClick={decrease}>-</button>
+      <span style={{ margin: "0 10px" }}>{count}</span>
+      <button onClick={increase}>+</button>
+    </div>
+  );
+}
+
+export default Counter;

src/components/Dice.jsx

@@ -0,0 +1,37 @@
+import { 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";
+
+const diceImages = [dice1, dice2, dice3, dice4, dice5, dice6];
+
+function Dice() {
+  const [currentDice, setCurrentDice] = useState(dice1);
+
+  function rollDice() {
+    // 1️⃣ Mostrar dado vacío
+    setCurrentDice(empty);
+
+    // 2️⃣ Después de 1 segundo mostrar uno aleatorio
+    setTimeout(() => {
+      const randomIndex = Math.floor(Math.random() * diceImages.length);
+      setCurrentDice(diceImages[randomIndex]);
+    }, 1000);
+  }
+
+  return (
+    <img
+      src={currentDice}
+      alt="dice"
+      onClick={rollDice}
+      style={{ width: "120px", cursor: "pointer" }}
+    />
+  );
+}
+
+export default Dice;

src/components/Greetings.jsx

@@ -0,0 +1,24 @@
+
+function Greetings(props) {
+  const { lang, children } = props;
+
+  let greeting;
+
+  if (lang === "de") {
+    greeting = "Hallo";
+  } else if (lang === "en") {
+    greeting = "Hello";
+  } else if (lang === "es") {
+    greeting = "Hola";
+  } else if (lang === "fr") {
+    greeting = "Bonjour";
+  }
+
+  return (
+    <p>
+      {greeting} {children}
+    </p>
+  );
+}
+
+export default Greetings;

src/components/IdCard.jsx

@@ -0,0 +1,20 @@
+
+function IdCard(props) {
+  const { lastName, firstName, gender, height, birth, picture } = props;
+
+  return (
+    <div className="id-card">
+      <img src={picture} alt={firstName} />
+
+      <div className="id-card-info">
+        <p>First name: {firstName}</p>
+        <p>Last name: {lastName}</p>
+        <p>Gender: {gender}</p>
+        <p>Height: {height}cm</p>
+        <p>Birth: {birth.toDateString()}</p>
+      </div>
+    </div>
+  );
+}
+
+export default IdCard;

src/components/LikeButton.jsx

@@ -0,0 +1,17 @@
+import { useState } from "react";
+
+function LikeButton() {
+  const [likes, setLikes] = useState(0);
+
+  function handleClick() {
+    setLikes(likes + 1);
+  }
+
+  return (
+    <button onClick={handleClick}>
+      {likes} Likes
+    </button>
+  );
+}
+
+export default LikeButton;

src/components/Random.jsx

@@ -0,0 +1,16 @@
+
+function Random(props) {
+  const { min, max } = props;
+
+  const randomNumber = Math.floor(
+    Math.random() * (max - min + 1) + min
+  );
+
+  return (
+    <p>
+      Random value between {min} and {max} =&gt; {randomNumber}
+    </p>
+  );
+}
+
+export default Random;