How do you decide which elements should be a component and which ones should be regular HTML in a React project? In this project I built, there are three components for the three major features of the app (saved colors, color picker, & color wheel). But it doesn't use any components for the elements within those components. I am trying to improve the project so that it is more in line with coding best practices.

Worked on these challenges yesterday. Please let me know your feedback. https://stackblitz.com/edit/vitejs-vite-3ngl2k?file=src%2FApp.jsx Edit: Thanks for the feedback

Please let me know how I can improve the code https://stackblitz.com/edit/vitejs-vite-dah7gf?file=src%2FApp.jsx Edit: Thanks for the advice, everyone

Is there a way to crop an image to fit only a certain region of it within a container other than using position-relative and absolute (without having to edit/crop the image beforehand). Of course, I used overflow-hidden property along with object-position but I couldn't position it properly as I wanted. It isn't for background, I wanted to do it for positioning a logo properly within the nav bar. How would you guys do it? For example:

I'm still recovering after surgery, I hope tomorrow I will have mental focus to review your code