#10Airbnb Card Composition Component
Overview
Build a fully functional Airbnb-style card component using composition. The component should be flexible, reusable, and render all essential parts of an Airbnb card.
Requirements
- Render a main page title and 4 Airbnb cards from the data.
- The first 3 cards should render all subcomponents:
ImageWrapperwithImage,Heart, andRecommendationContentwithTitle(includingValoration),Description,Price, andCancelation
- The 4th card is partial:
- Does not render
Heart,Recommendation,Valoration, orCancelation - Within
Content, the order must be:Title,Price,Description
- Does not render
- Each card must be composed using the following subcomponents:
Card(wrapper)ImageWrapperImageHeartRecommendationContentTitleValorationDescriptionPriceCancelation
- Ensure that Heart buttons are clickable and reflect the
isFavoritestate. - Display Recommendation and Cancelation texts when applicable.
- Use semantic HTML and ensure accessibility where possible.
- Cards should render correctly even if some subcomponents are omitted (as in the 4th card).
Notes
- Focus on composition: each subcomponent should manage only its part of the card.
- Cards should be reusable and flexible to support different data.
- Use the provided
dataarray for testing and rendering content. - Do not remove the
data-testidattributes from the markup, as they are used in the automated tests.
Tests
- renders 4 cards
- renders the first 3 cards correctly with Heart state
- renders the 4th card correctly without Valoration, Heart, Recomendation and Cancelation
- renders the 4th card correctly in the right order