The component fetches dragons data from the SpaceX API upon mounting.
The fetched data includes key details such as id, name, description, and an image URL for each dragons.
UI Layout:
Dragons are displayed in individual cards, each containing an image, dragons name, ID, and description.
A "Reserve Dragons" button is included in each card. When clicked, it toggles the dragon's reservation status.
If a dragons is reserved, a "Reserved" badge is displayed, and the button changes to "Cancel Reservation" with a success color scheme.
The component fetches dragons data from the SpaceX API upon mounting. The fetched data includes key details such as id, name, description, and an image URL for each dragons. UI Layout:
Dragons are displayed in individual cards, each containing an image, dragons name, ID, and description. A "Reserve Dragons" button is included in each card. When clicked, it toggles the dragon's reservation status. If a dragons is reserved, a "Reserved" badge is displayed, and the button changes to "Cancel Reservation" with a success color scheme.