All solutions

Any and all criticism for this is welcome. I don't know if this map could have been implemented better so, any pointers will be appreciated. Otherwise, this was my best shot at getting this component to work. :}

The give and take for using this library is that you can skip out almost entirely on writing any css files but, the code can feel heavy and crowded as you define the styles and states and media queries directly on the jsx component. I think it's just a matter of getting comfortable with spending more time cleaning the code and writing cleaner code as you go.

What would be the best practice for creating Media Queries using the useMediaQuery hook? I've had to repeat some code in certain areas and render based on the size of devices.

I don't think I was using the useState hook correctly so, please, any commentary and advice is will be appreciated.

The Sorting of Comments was a Real Pain in my Butt* It works (Thank God) but I feel it could have been done a little better. Just couldn't figure it out.

I used functions to build screen specific layouts for mobile and desktop as a result some of the code is duplicated with slight changes in the order of the lines but essentially the same code I don't think this was the best way to do it. but, it was a way to get around it.

I feel like it doesn't look quite right.🤔 I don't know if its the sizing or the scaling out of the site. Just your opinion on the final product would be appreciated greatly. and where else I could place my efforts in improving my markup and styling skills