Sigma-Labs-XYZ/Explain-AI

TopicCard Component

DomVinyard opened this issue · 0 comments

We need to implement a new Topic Card component in our React application to display information about different topics on the site. The Topic Card component should be reusable.

Screenshot

The TopicCard is the section highlighted in red

image

Tasks:

  • Create a new file TopicCard.js for the Topic Card component.
  • Implement the Topic Card component in TopicCard.js. The component should render a card with the topic's title, description, and image and look correct on desktop and mobile
  • Write tests for the Topic Card component in TopicCard.test.js. The tests should ensure that the component renders the correct information based on the props passed to it.
  • If no image is available show a placeholder image
  • For styling use SASS

Acceptance Criteria:

  • The Topic Card component should be implemented in its own file TopicCard.js.
  • The Topic Card component should be tested in TopicCard.test.js, and the tests should pass.
  • The Topic Card component should render a card with the topic's title, description and image and look correct across different screen sizes
  • The 'Tell me more' button doesn't need to be functional