Search shows & add to lists

[sahedw]

Add two radio inputs to the form. Create new useStatewhich tracks onChangeif movies or shows is selected. Make the selection required. Make the useStateglobal and provide it through useContext. Adapt the initial fetch to change depending of useState from movies to shows. Create TV and TVDetail Component to display search results with new objects since show and movie objects are not completly identical. Still use the same routes just adapt thgem with conditional rendering. Create TVDetailFooter and also useStorageStorageState for a seperate watchlist and watched for shows. Use the new footer to adapt the button functions to save the show to the newly created lists. Append the show lists under the movie lists on the pages. Adapt the logic so that next.js know with a click if movie/show needs to be displayed.

[sahedw]

This is a big one and very well done as far as I can see. There is only one issue: Movies and Shows are similar in a way and differ only partially. It's hard to build a common "monster component" that handles all differences, but you should definitely try to reuse the styled components you use inside your bigger components. Put them in a separate file and import them where needed. If there are slight differences (e.g. the title of a show should be red and the title of a movie blue), use props (e.g. variant="movie" or variant="show") to reflect them.

Really appreciate the code review! It didn't even cross my mind to refactor the styled components just import them. Good idea because they are for some components nearly a 90% match. I will do that immedietly in the next pushed commits.