[ ] Create MediaCard component that takes in image data in a json format as a prop called mediaInfo.
Create in /(pages)/uploaded-media/_components/MediaCard.tsx
Create the scss module in the same folder
Make sure it can handle any image/video by filling the container as needed. If it's a video then display the preview image for the video.
I would recommend setting the width to a fixed value but not the height. Also the width should be defined as a variable somewhere
Rather than hardcoding the height, you can use an aspect ratio with the width for the image and have the rest of the content determine the height.
The title underneath should be one line. If it's longer, then truncate.
Make sure to use Next.js Image tags. They are a little wonky for responsiveness but what I do is I just make a parent container with the desired dimentions and I use the fill property for Next.js image tags.
mediaInfo
.