<repo_name>gizeminthecity/lab-react-training<file_sep>/src/components/ClickablePicture.jsx
import React from 'react';

function ClickablePicture(props) {
  const [picture, setPicture] = React.useState('false');

  const handleClick = () => setPicture(!picture);

  return (
    <div>
      <img
        onClick={handleClick}
        src={!picture ? props.imgClicked : props.img}
        alt="max"
      />
    </div>
  );
}

export default ClickablePicture;
<file_sep>/src/components/Dice.jsx
import React from 'react';

function Dice() {
  const [dice, setDice] = React.useState('3');

  const handleClick = () => {
    const randomDice = Math.floor(Math.random() * 6) + 1;
    setDice('-empty');
    setTimeout(() => {
      setDice(randomDice);
    }, 1000);
    return dice;
  };
  return (
    <div>
      <img
        style={{ width: '200px' }}
        onClick={() => handleClick()}
        src={`/img/dice${dice}.png`}
      />
    </div>
  );
}

export default Dice;
<file_sep>/src/components/Facebook.jsx
import React from 'react';
import profiles from '../data/berlin.json';

function Facebook() {
  return (
    <div>
      {profiles.map((el) => {
        return (
          <div
            style={{
              border: '1px solid black',
              display: 'flex',
              margin: '2rem',
            }}
          >
            <div>
              <img style={{ width: '150px' }} src={el.img} />
            </div>
            <div>
              <p>First name: {el.firstName}</p>
              <p>Last name: {el.lastName}</p>
              <p>County: {el.country}</p>
              <p>Type: {el.isStudent ? 'Student' : 'Teacher'}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
}

export default Facebook;
<file_sep>/src/components/CreditCard.jsx
import React from 'react';

function CreditCard(props) {
  const {
    type,
    number,
    expirationMonth,
    expirationYear,
    bank,
    owner,
    bgColor,
    color,
  } = props;
  const digits = number.slice(-4);

  const cardType = {
    Visa: '/img/visa.png',
    'Master Card': '/img/master-card.svg',
  };

  const cardColor = {
    backgroundColor: bgColor,
    color,
  };

  return (
    <div style={cardColor}>
      <div>
        <img src={cardType[type]} />
      </div>

      <div>
        <p>
          {'*'.repeat(12)} {digits}
        </p>
      </div>
      <div>
        Expires: {expirationMonth > 9 ? expirationMonth : `0${expirationMonth}`}{' '}
        / {expirationYear - 2000} - {bank}
      </div>
      <div>{owner}</div>
    </div>
  );
}

export default CreditCard;
<file_sep>/src/components/LikeButton.jsx
import React from 'react';

function LikeButton(props) {
  const colors = ['purple', 'blue', 'green', 'yellow', 'orange', 'red'];
  const [counter, setCounter] = React.useState(0);

  const handleLike = () => {
    return setCounter(counter + 1);
  };

  return (
    <div>
      <button
        onClick={handleLike}
        style={{
          background: `${colors[counter]}`,
        }}
      >
        {counter} Likes
      </button>
    </div>
  );
}

export default LikeButton;
<file_sep>/src/components/Carousel.jsx
import React from 'react';

function Carousel(props) {
  const [counter, setCounter] = React.useState(0);

  const handleRight = () => (counter < 3 ? setCounter(counter + 1) : counter);

  const handleLeft = () => (counter > 0 ? setCounter(counter - 1) : counter);

  return (
    <div>
      <button onClick={handleLeft}>Left</button>
      <img src={props.imgs[counter]} />
      <button onClick={handleRight}>Right</button>
    </div>
  );
}

export default Carousel;
<file_sep>/src/components/NumbersTable.jsx
import React from 'react';

function NumbersTable(props) {
  const numbers = [];
  for (let i = 1; i <= props.limit; i++) numbers.push(i);

  return (
    <div style={{ display: 'flex', margin: '5rem' }}>
      {numbers.map((el) => {
        return el % 2 === 0 ? (
          <div
            style={{
              width: '150px',
              height: '50px',
              border: '1px solid black',
              backgroundColor: 'red',
            }}
          >
            <p>{el}</p>
          </div>
        ) : (
          <div
            style={{
              width: '150px',
              height: '50px',
              border: '1px solid black',
            }}
          >
            <p>{el}</p>
          </div>
        );
      })}
    </div>
  );
}

export default NumbersTable;
