Construir um Mood Board

Instruções

Um mood board é uma colagem de imagens e texto que transmite uma ideia geral, objetivo ou sentimento sobre um tópico específico. Neste laboratório, você criará um mood board usando componentes React reutilizáveis. O CSS já foi fornecido para você. Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de Usuário: 1. Você deve criar e exportar um componente MoodBoardItem que aceita três props: color, image e description. 2. Seu componente MoodBoardItem deve retornar um div com a classe mood-board-item como seu elemento de nível superior. 3. Você deve definir a cor de fundo do elemento .mood-board-item para o valor da propriedade color usando estilos inline. 4. Você deve renderizar um elemento img, com uma classe mood-board-image e seu atributo src definido para o valor da prop image, dentro do elemento .mood-board-item. 5. Você deve renderizar um elemento h3, com a classe mood-board-text e seu texto sendo o valor da prop description, dentro do elemento .mood-board-item. 6. Você deve criar e exportar um MoodBoard. 7. Seu componente MoodBoard deve retornar um div como seu elemento de nível superior. 8. Seu componente MoodBoard deve renderizar um elemento h1 com uma classe mood-board-heading e o texto Destination Mood Board. 9. Seu componente MoodBoard deve renderizar uma div com uma classe mood-board. 10. Seu componente MoodBoard deve renderizar pelo menos três componentes MoodBoardItem dentro do elemento .mood-board, cada um deve passar as props color, image e description com valores válidos. Você pode usar as seguintes imagens no seu Mood Board se desejar:

https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/pathway.jpg
https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/shore.jpg
https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/grass.jpg
https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/ship.jpg
https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/santorini.jpg
https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/pigeon.jpg

O que fazer:

Testes:

Você deve exportar um componente `MoodBoardItem`.
Seu componente `MoodBoardItem` deve retornar um `div` com a classe `mood-board-item` em seu elemento de nível superior.
A cor de fundo do elemento `.mood-board-item` deve ser definida com o valor da propriedade `color` usando estilos inline.
Seu componente `MoodBoardItem` deve renderizar um elemento `img` com a classe `mood-board-image` e seu `src` definido para o valor da prop `image`.
Seu componente `MoodBoardItem` deve renderizar um elemento `h3` com a classe `mood-board-text` e seu texto definido para o valor da prop `description`.
Você deve exportar um componente `MoodBoard`.
Seu componente `MoodBoard` deve retornar um `div` como seu elemento de nível superior.
Seu componente `MoodBoard` deve renderizar um elemento `h1` com uma classe `mood-board-heading` e o texto `Destination Mood Board`.
Seu componente `MoodBoard` deve renderizar pelo menos três componentes `MoodBoardItem`, cada um deve passar as props `color`, `image` e `description` com valores válidos.
Seu componente `MoodBoard` deve ser renderizado no elemento `#root` da página.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Mood Board</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.3/babel.min.js"></script>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      src="index.jsx"
    ></script>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="root"></div>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      data-presets="react"
      data-type="module"
    >
      import { MoodBoard } from './index.jsx';
      ReactDOM.createRoot(document.getElementById('root')).render(
        <MoodBoard />
      );
    </script>
  </body>
</html>

body {
  background-color: #ffffcc;
}

.mood-board-heading {
  text-align: center;
  font-size: 2.5em;
  color: #333;
  margin-top: 20px;
}

.mood-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.mood-board-item {
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  height: 250px;
}

.mood-board-image {
  border-radius: 5px;
  width: 180px;
  height: 150px;
  object-fit: cover;
}

.mood-board-text {
  margin-top: 20px;
  font-size: 1.2em;
}

Preview