Collections: CollectionCard

[Austin2Shih]

• Create the CollectionCard component
• Create in /(pages)/content/[collection]/_components/CollectionCard/CollectionCard.tsx
• Create the scss module in the same folder
• example use case:

<CollectionCard data={some json object passed in}/>

• Allocate space for the MediaPreview component which will fill in the images for you. All you have to do for the images is call the MediaPreview component with the image data at data.media_list.
• The cards have to be the same size but that does not necessarily mean you should hardcode the sizes. I would recommend setting the width to something hardcoded as a global variable in _globals/styles/variables and letting the content define the height.
• Truncate any text that is too long so it doesn't line wrap and make cards different heights.
• To figure out how much height to allocate to the MediaPreview, use aspect-ratio to anchor the height to the width of the container. In your case the aspect ratio of the MediaPreview will be whatever 350/230 is.
• For now, just add the options button on the top right of the card and have it do nothing.