Create <VideoThumbnail /> Component

[michael-martin-al]

Summary

Build a component for displaying a single video thumbnail card. In the attached screenshot, you can see four six video thumbnails. Your job is to create a very similar user interface using only components from our melos component library: https://github.com/lifechurch/melos

You won't be able to recreate the exact look and feel that you see on the Bible.com videos page, but that's OK! 😄 What you see on Bible.com represents our old design style, but melos represents our newest design specs. I am sure you'll have questions, so feel free to ping me. We'll get one of our YouVersion designers to give you the final 👍 when you're done. So, you can expect there to be some back and forth work with them getting it just right.

Mock API Data

After #11 has been completed, there should be some mock data available to use while building your component. Instead of hard-coding the strings and images, you want to grab those from the mock api data. If you have questions about this, just make a comment here and we'll do our best to answer quickly.

This is what you're building

Here's a Collection of Several Video Thumbnails

⚠️ Notice that the thumbnail has a hover effect. You can see how it should work here: https://www.bible.com/videos/266/series

[borozcod]

Hi @michael-martin-al I can take a look at this

[michael-martin-al]

All yours @borozcod.