All cards search view (collection view)

[JonoSommers]

Description:
The All Cards Search View (Collection View) allows users to view either the Pokémon or MTG collection. When the Pokémon or MTG button is clicked, the corresponding cards are fetched from the API and displayed as "posters" on the page. The page will also display the card type (Pokémon or MTG) at the top along with a Home button and a search bar.

Details:

• Two buttons, Pokémon Collection and MTG Collection, allow users to view the corresponding collection.
• Clicking on the Pokémon Collection button fetches data from the Pokémon API and displays the cards as "posters" on the page.
• Clicking on the MTG Collection button fetches data from the MTG API and displays the cards as "posters" on the page.
• The card type (Pokémon or MTG) is displayed at the top of the page.
• The page includes a Home button and a Search Bar at the top.

Examples:

• Response Body for Fetching Pokémon Cards (Example from Pokémon API):

{
  "cards": [
    {
      "id": 1,
      "name": "Pikachu",
      "type": "Pokemon",
      "image": "https://example.com/images/pikachu.png"
    },
    {
      "id": 2,
      "name": "Charmander",
      "type": "Pokemon",
      "image": "https://example.com/images/charmander.png"
    }
  ]
}

• Response Body for Fetching MTG Cards (Example from MTG API):

{
  "cards": [
    {
      "id": 101,
      "name": "Black Lotus",
      "type": "Magic",
      "image": "https://example.com/images/black-lotus.png"
    },
    {
      "id": 102,
      "name": "Shivan Dragon",
      "type": "Magic",
      "image": "https://example.com/images/shivan-dragon.png"
    }
  ]
}

Acceptance Criteria:

• There are two buttons on the page: Pokémon Collection and MTG Collection.
• Clicking on the Pokémon Collection button fetches data from the Pokémon API and displays the cards as "posters" on the page.
• Clicking on the MTG Collection button fetches data from the MTG API and displays the cards as "posters" on the page.
• The top of the page displays the card type (Pokémon or MTG) along with a Home button and a Search Bar.
• Each "poster" displays the card's name and image.
• All interactions (button clicks, fetching data, displaying cards) work as expected and pass the tests.