Homepage Podcasts widget

[hs4man21]

We want to display a Spotify embed of our most recent podcast on our homepage:

See below example of what the basic Spotify embed looks like when included as an iframe. The iframe can be copied by selecting "Share" and then "Copy Embed Code" on any Spotify podcast episode.

To present our most recent podcast on the homepage, we want to:

• Make sure to do "git pull" on your local main branch of stanforddaily and then create a new branch off of it (type "git branch [NEW_BRANCH_NAME]" and then "git checkout [NEW_BRANCH_NAME]") for this ticket. I recommend naming the new branch "145-homepage-podcasts-widget" to capture the ticket number and a brief description of it. This is a really good practice, especially on larger dev teams like the one you might work on someday!
• Create a file called "PodcastWidget.tsx" in the "components/pages/Homepage" folder.
• Using CovidDataWidget.tsx as an example, create a component called PodcastWidget that contains the "Podcasts" section header (instead of "COVID-19") and includes the iframe from Spotify. See below for reference to header part.

• To actually place the component on our homepage, go to the index.tsx file in that Homepage directory and scroll down to where you see . You can put the tag for your component right underneath (don't forget to import it!) or under another section on the homepage.
• We should probably place the component in the right rail on the homepage, perhaps below "The Grind" — feel free to experiment with placement and size though!
• We might also want to try things like adding a border at the top/bottom of the widget, adding some additional text below like in the COVID-19 example to give more insight into the podcast, etc. — this is the more flexible/interesting part of the design!
• It's also worth considering if we want the widget to span the full width of the right column. We might, for instance, have it span 2/3 the width of the column or so and add another, square-ish widget to the right of the podcasts one. This other widget wouldn't be within the scope of your task, of course, but it's worth thinking about as you explore sizing the podcasts widget.
• Remember you can run the code in your browser by typing the commands "yarn" and then "yarn start" from the root of your stanforddaily repo. Once you are running the code, you can see it at localhost:3000, and any changes you make will be reflected automatically thanks to hot-reloading.
• Have fun! And please don't hesitate to reach out with any questions or concerns!