Responsive Article Preview Component w/ Next.js/React/Tailwind

What are you most proud of, and what would you do differently next time?

I don't think I've ever created an SVG from scratch manually, I'm typically grabbing them from Luide React or something similar.

However for this project I needed to create the toast bubble tail that points downward and I decided to create an SVG from scratch in code to do so. The markdown ended up being pretty straightforward for such a simple SVG, but it was fun to learn the basics nevertheless.

What challenges did you encounter, and how did you overcome them?

When I originally built the desktop/tablet version of the toast share component I used an SVG that was generated in the Figma project to try and get it done quicker. However, I had to display the share links on top of it which ended up making the code pretty ugly and hard to understand.

Eventually I switched to simply using a div for the toast's main bubble and used the custom simple SVG for the toast's tail. This made the code much easier to understand and also made separating the desktop/tablet component from the mobile component much cleaner, since I could simply pass the ShareLinks component to both of them as a child to simplify each of them.

This also meant that I didn't need to absolutely position the links component for the desktop/tablet version since they were now contained with the parent div, which felt much cleaner.

What specific areas of your project would you like help with?

I think the biggest thing for me is still wanting to get advice about how to organize the component using semantic HTML.