A more common interface pattern on product pages is to have a drop-down list, or select box, with your variations displayed and available for selecting.
When using a select box, we will have a variation which has either been selected by default or that the user has interacted with and chosen specifically. Because of this, we can change the image when the user changes the select box and display other pieces of information about the variant on the product page, including price and quantity.
We won't be relying on passing through the variant to the addToBasket method, as it will exist as an object on the product component.
Update your <table> element to be a <select>, and the <tr> to an <option>. Move the ...
