Social Media Dashboard in React.js

Hi Eduardo!

Nice job! To answer your question about code size/readability, I think what you have is good! I would suggest moving the "data" from App.js to its own file which you can import to App.js to use (talking about const dadosCardTop and bottom). If the images cause you issues, you have a few ways to get around the problem. You can pass the name (facebook, instagram, ...) to a reconstructed path which you can reconstruct in the src attr (if you use img), you could try passing the full path to image as an object property, or you could make all the icons in a separate component and pass a prop (I had done this here over a year ago).

Nice job breaking up the components code with Js and Css on their own, this makes things clean and reusable.

I believe your theme switcher can be simpler. There are different ways to deal with these, my go-to choice is to get CSS variables on the body to match a data attribute. That way you can set all the variables in CSS, you'll reuse the same variable name for both themes but change the values. In your code you can use the CSS variables and once the data attribute changes (using Js) the colors toggle all at once. (example in the same project)

Great job! Hope this helps!