This pull request introduces the Rockets component, which is responsible for displaying a list of SpaceX rockets fetched from the SpaceX API. The component is designed with a responsive layout, ensuring compatibility across different devices and screen sizes.
Key Features:
Data Fetching:
The component fetches rocket data from the SpaceX API upon mounting.
The fetched data includes key details such as id, name, description, and an image URL for each rocket.
UI Layout:
Rockets are displayed in individual cards, each containing an image, rocket name, ID, and description.
A "Reserve Rocket" button is included in each card. When clicked, it toggles the rocket's reservation status.
If a rocket is reserved, a "Reserved" badge is displayed, and the button changes to "Cancel Reservation" with a success color scheme.
Redux Integration:
The component is connected to the Redux store, where rocket data is stored and managed.
The reserved state of each rocket is handled via Redux, ensuring a centralized state management approach.
Responsive Design:
The layout is responsive, utilizing Bootstrap classes to ensure the cards and content adjust appropriately across various screen sizes.
This pull request introduces the Rockets component, which is responsible for displaying a list of SpaceX rockets fetched from the SpaceX API. The component is designed with a responsive layout, ensuring compatibility across different devices and screen sizes.
Key Features:
Data Fetching:
The component fetches rocket data from the SpaceX API upon mounting. The fetched data includes key details such as id, name, description, and an image URL for each rocket. UI Layout:
Rockets are displayed in individual cards, each containing an image, rocket name, ID, and description. A "Reserve Rocket" button is included in each card. When clicked, it toggles the rocket's reservation status. If a rocket is reserved, a "Reserved" badge is displayed, and the button changes to "Cancel Reservation" with a success color scheme.
Redux Integration:
The component is connected to the Redux store, where rocket data is stored and managed. The reserved state of each rocket is handled via Redux, ensuring a centralized state management approach. Responsive Design:
The layout is responsive, utilizing Bootstrap classes to ensure the cards and content adjust appropriately across various screen sizes.