task#3.md

Список Forbes

Необхідно доповнити компонент <ForbesList>, за допомогою якого ми могли б відображати інформацію про актуальну інформацію портала Forbes. Інформація про актуальний рейтинг forbes.json.

Опис компонента <ForbesList>

Компонент повинен приймати один проп list - масив об'єктів.

Компонент повинен створювати наступну структуру.

<div className={style.board}>
  <div className={style.header}>
    <h2 className={style.title}>
      <span className={style.titleTop}>Forbes</span>
      <span className={style.titleBottom}>Leader board</span>
    </h2>
  </div>

  <ul className={style.list}>
     {/* Довільна кіл-сть
        <li className={style.item}>
           <ForbesListItem/>
        </li>
     */}
  </ul>
</div>

Опис компонента <ForbesListItem>

Компонент повинен приймати кілька пропcів:

• avatar - аватар мільйонера
• name - ім'я мільйонера
• capital - статки мільйонера
• isIncrease - буль, що сигналізує про стан мільйонера: збільшився або ні.

Залежно від пропа isIncrease, повинна змінюватися іконка: при збільшення статку - <FcBullish/> або при зменшенні - <FcBearish/>

Компонент повинен бути наступної структури.

<>
  <img
    className={style.avatar}
    src="https://randomuser.me/api/portraits/men/32.jpg"
    alt="Mark Zuckerberg"
  />
  <h3 className={style.title}>Mark Zuckerberg</h3>
  <span className={style.capital}>
    35.7 <BiDollarCircle color="#2196f3" size={22} />
    {/* Тут має бути необхідна іконка зміни статку */}
  </span>
</>

Приклад використання

import forbes from 'data/forbes.json';

<ForbesList list={forbes} />,