NewTeam Component

[rtate2]

User Story

As a user when I click the We have our Team button, I will be redirected to the create team form

Acceptance Criteria

GIVEN the user clicks the We have our Team button on the home page WHEN the user is redirected to the create team form page THEN the user will be able to select five members from a drop down list AND a team name from a drop down list AND once the save button is clicked the new team card will be printed in the Teams component with a time/date stamp, sorted by when they were created

Dev Notes

• In src/components/pages/NewTeam/NewTeam.js create the form using Bootstrap form components that will allow the user to click a dropdown menu to select the team name and the players for the team.

<form>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Team Name</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>Select Team</option>
      {
         teams.map((team) => (
           (<option key={team.id} value={team.id}>{team.name}</option>)))
       }
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Player Names</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>Select Player</option>
      {
         players.map((player) => (
           (<option key={player.id} value={player.id}>{player.name}</option>)))
       }
    </select>
  (x 4 more Player Names divs)
  </div>
  <button type="submit" class="btn btn-primary">Save Team</button>
</form>

• Style according to mockup
• Form functionality will be covered in #14

[rtate2]

TeamForm Mockup