Adding dark theme at the beginning helping me to set my environment and then never back to this point anymore. How to setup dark theme I found on YouTube: https://www.youtube.com/watch?v=1q5oOZE6o4c
First try TypeScript is little bit confusing. But basic components seems no need complicated types or interfaces. Also I did add FontAwesome. For NextJS it is little bit different compare to regular html. Again little bit confusing but I got it.
Created button. Looks like simpliest element. Search icon was changed because in this project I want to use font awesome but this icon is not available for free.
I figured out how to connect font awesome in my project. Also I was trying to use specific icon, but somehow this icon didn't want to work. After some troubleshooting I figured out I am no able to use a lot of icons from library coz they are not free. So this troubleshooting could help me to realize clearly how to use all icons what I have.
If user was not found my error text should appear and then after 4 seconds disappear. For now this state is local.
Make elements for User is not difficult, everything is separated in different files.. The only thing which made me a bit struggle is content's layout for different screens. I was trying use float on image, but seems like it is impossible to use it if sibling inside grid or flex container. So I decided to use grid for whole content inside my card. Little bit magic with adjustments and everything was done. With almost no pain.
If add extra breakpoint for tailwind other breakpoints won't work correctly, even if I will try to add them through extends. The easiest way is just import default breakpoints from tailwind defaultTheme and extract them to new breakpoints rules with my new one.