Design comparison
Solution retrospective
That required a bunch of learning not specifically on the project requirements but on how to achieve the desired effect using Next13 and Tailwind.
I had to download an external package - React Responsive to determine if the device was Mobile or Desktop. There's only two possible layouts tho.
Also using Next/Image and Next/Link.
My questions:
-
Why does it make a weird effect the very first time I click the button but not the subsequent times? I'm using my components improperly? I had to set everything to "use client" because of some Hydratation errors that keep poping. That's the reason?
-
The way I've changed the color of the Arrow icon is by using a conditional and then applying mix-blend-screen to it if my state changed to true:
const arrowColor = clicked ? "mix-blend-screen" : null;
Anyway, first time doing it via Next13 and the hydratation error really got me good. I'll need more time to understand when to put things on the server side or client.
As always, any feedback you can give me will be greatly appreciated.
Thanks, Pablo
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord