Next13 + React + Tailwind

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