RelationCard Component

[DomVinyard]

We need to implement a new RelationCard component in our React application to display information about related topics to a main topic. The RelationCard component should be reusable.

Screenshot

The RelationCard is the section highlighted in red

Tasks:

• Create a new file RelationCard.js for the RelationCard component
• Implement the Relation Card component. 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 RelationCard.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 (and optionally TailWind if we are committed to implementing this)
• Clicking the component should navigate the user to the topic specified by the TopicCard's slug

Acceptance Criteria:

• The RelationCard component should render a card with the topic's title, description and image and look correct across different screen sizes
• The RelationCard component should have a suite of tests and the tests should pass.
• Clicking the relation card takes you to the correct topic

[swdilip]

@DomVinyard Where should the RelationCard component go? In the topic page or the home page?