Kanak-internship

package.json

@@ -9,6 +9,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "react-training-new": "file:",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,23 +1,99 @@
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+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";
+import LikeButton from "./components/LikeButton";
+import ClickablePicture from "./components/ClickablePicture";
+import Dice from "./components/Dice";
+import Carousel from "./components/Carousel";
+import NumbersTable from "./components/NumbersTable";
+import RGBColorPicker from "./components/RGBColorPicker";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+      <h1>React Components Lab</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} />
+
+      <BoxColor r={255} g={0} b={0} />
+      <BoxColor r={128} g={255} b={0} />
+
+      <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"
+      />
+
+      <Rating>0</Rating>
+      <Rating>1.5</Rating>
+      <Rating>3</Rating>
+      <Rating>4.8</Rating>
+
+      <DriverCard
+        name="Travis Kalanick"
+        rating={4.2}
+        img="https://si.wsj.net/public/resources/images/BN-TY647_37gql_OR_20170621052140.jpg"
+        car={{ model: "Toyota Corolla Altis", licensePlate: "CO42DE" }}
+      />
+
+      <LikeButton />
+      <LikeButton />
+      <ClickablePicture
+        img="./assets/images/maxence.png"
+        imgClicked="./assets/images/maxence-glasses.png"
+      />
+      <Dice />
+      <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",
+        ]}
+      />
+      <NumbersTable limit={12} />
+      <RGBColorPicker />
     </div>
   );
 }

src/components/BoxColor.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+function BoxColor({ r, g, b }) {
+  const color = `rgb(${r}, ${g}, ${b})`;
+  const hexColor = `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+
+  return (
+    <div style={{ backgroundColor: color, padding: "20px", margin: "10px" }}>
+      <p>RGB: {color}</p>
+      <p>Hex: {hexColor}</p>
+    </div>
+  );
+}
+
+export default BoxColor;

src/components/Carousel.js

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+
+function Carousel({ images }) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const goLeft = () => {
+    setCurrentIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length);
+  };
+
+  const goRight = () => {
+    setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+  };
+
+  return (
+    <div>
+      <button onClick={goLeft}>Left</button>
+      <img src={images[currentIndex]} alt="carousel" style={{ width: "300px", height: "300px" }} />
+      <button onClick={goRight}>Right</button>
+    </div>
+  );
+}
+
+export default Carousel;

src/components/ClickablePicture.js

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+
+function ClickablePicture({ img, imgClicked }) {
+  const [isClicked, setIsClicked] = useState(false);
+
+  const handleClick = () => {
+    setIsClicked(!isClicked);
+  };
+
+  return (
+    <img
+      src={isClicked ? imgClicked : img}
+      alt="Clickable"
+      onClick={handleClick}
+    />
+  );
+}
+
+export default ClickablePicture;

src/components/CreditCard.js

@@ -0,0 +1,26 @@
+import React from "react";
+
+function CreditCard({ type, number, expirationMonth, expirationYear, bank, owner, bgColor, color }) {
+  const style = {
+    backgroundColor: bgColor,
+    color: color,
+    padding: "20px",
+    width: "300px",
+    borderRadius: "10px",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+  };
+
+  return (
+    <div style={style}>
+      <div><strong>{type}</strong></div>
+      <div>**** **** **** {number.slice(-4)}</div>
+      <div>Expires {expirationMonth}/{expirationYear}</div>
+      <div>{bank}</div>
+      <div>{owner}</div>
+    </div>
+  );
+}
+
+export default CreditCard;

src/components/Dice.js

@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+
+function Dice() {
+  const [diceValue, setDiceValue] = useState(null);
+  const diceImages = [
+    './assets/images/dice-empty.png',
+    './assets/images/dice1.png',
+    './assets/images/dice2.png',
+    './assets/images/dice3.png',
+    './assets/images/dice4.png',
+    './assets/images/dice5.png',
+    './assets/images/dice6.png',
+  ];
+
+  const handleClick = () => {
+    setDiceValue(diceImages[0]);
+
+    setTimeout(() => {
+      setDiceValue(diceImages[Math.floor(Math.random() * 6) + 1]);
+    }, 1000);
+  };
+
+  return (
+    <img
+      src={diceValue || diceImages[0]}
+      alt="Dice"
+      onClick={handleClick}
+      style={{ cursor: 'pointer' }}
+    />
+  );
+}
+
+export default Dice;

src/components/DriverCard.js

@@ -0,0 +1,26 @@
+import React from "react";
+
+function CreditCard({ type, number, expirationMonth, expirationYear, bank, owner, bgColor, color }) {
+  const style = {
+    backgroundColor: bgColor,
+    color: color,
+    padding: "20px",
+    width: "300px",
+    borderRadius: "10px",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+  };
+
+  return (
+    <div style={style}>
+      <div><strong>{type}</strong></div>
+      <div>**** **** **** {number.slice(-4)}</div>
+      <div>Expires {expirationMonth}/{expirationYear}</div>
+      <div>{bank}</div>
+      <div>{owner}</div>
+    </div>
+  );
+}
+
+export default CreditCard;

src/components/Greetings.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+function Greetings({ lang, children }) {
+  const greetings = {
+    de: "Hallo",
+    en: "Hello",
+    es: "Hola",
+    fr: "Bonjour",
+  };
+
+  return <h2>{greetings[lang]} {children}</h2>;
+}
+
+export default Greetings;

src/components/IdCard.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+function IdCard({ lastName, firstName, gender, height, birth, picture }) {
+  return (
+    <div className="id-card">
+      <img src={picture} alt="Profile" />
+      <div>
+        <p><strong>First Name:</strong> {firstName}</p>
+        <p><strong>Last Name:</strong> {lastName}</p>
+        <p><strong>Gender:</strong> {gender}</p>
+        <p><strong>Height:</strong> {height} cm</p>
+        <p><strong>Birth:</strong> {birth.toDateString()}</p>
+      </div>
+    </div>
+  );
+}
+
+export default IdCard;

src/components/LikeButton.js

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+
+function LikeButton() {
+  const [likes, setLikes] = useState(0);
+  const [colorIndex, setColorIndex] = useState(0);
+  const colors = ['purple', 'blue', 'green', 'yellow', 'orange', 'red'];
+
+  const handleClick = () => {
+    setLikes(likes + 1);
+    setColorIndex((colorIndex + 1) % colors.length);
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      style={{ backgroundColor: colors[colorIndex], color: "white" }}
+    >
+      {likes} Likes
+    </button>
+  );
+}
+
+export default LikeButton;

src/components/NumbersTable.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+function NumbersTable({ limit }) {
+  const numbers = [];
+  for (let i = 1; i <= limit; i++) {
+    numbers.push(i);
+  }
+
+  return (
+    <div>
+      {numbers.map((number) => (
+        <div key={number} style={{ color: number % 2 === 0 ? "red" : "black" }}>
+          {number}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default NumbersTable;

src/components/RGBColorPicker.js

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import SingleColorPicker from "./SingleColorPicker";
+
+function RGBColorPicker() {
+  const [rValue, setRValue] = useState(0);
+  const [gValue, setGValue] = useState(0);
+  const [bValue, setBValue] = useState(0);
+
+  const handleColorChange = (color, value) => {
+    if (color === "r") setRValue(value);
+    if (color === "g") setGValue(value);
+    if (color === "b") setBValue(value);
+  };
+
+  return (
+    <div>
+      <div
+        style={{
+          backgroundColor: `rgb(${rValue}, ${gValue}, ${bValue})`,
+          width: "100px",
+          height: "100px",
+          marginBottom: "10px",
+        }}
+      ></div>
+      <SingleColorPicker color="r" value={rValue} onChange={handleColorChange} />
+      <SingleColorPicker color="g" value={gValue} onChange={handleColorChange} />
+      <SingleColorPicker color="b" value={bValue} onChange={handleColorChange} />
+    </div>
+  );
+}
+
+export default RGBColorPicker;