Hey guys! I'm fiddling around with Next.js and I trying to create a page similar to what you can see in the image.
What i'm trying to accomplish is a swap of components (a List View and a Calendar View, but it doesn't really matter) when I tap/toggle a button (an actual input of type checkbox wrapped in a separate component since it's quite styled). Normally I could do this leveraging the useState hook with a boolean state set by the toggle and conditionally showing one component or another.
The components show the same data, just in different ways, so I have a server action that fetches data and passes it through props to the components that just do their job.
So far so good, but the fact is that by using frontend hooks like useState I turn more than half of the page content to a client component and I'm just really trying to take advantage of server components to avoid leaving all the work to the client side.
The toggle needs to be a server component since there is user interaction, but no matter what I come up with, in the end I just have the two components I need to show as client ones as soon as I adopt hooks or other client side stuff (because, as far as I understood, everything inside a client component turns into one).
Here's what I tried:
1 - Wrapper component (server component) with useState set by the ToogleComponent (client component): no good because of the hook.
2 - Form with the ToggleComponent that uses a server action to handle the onClick but couldn't come up with a solution for the boolean state.
Is there a way to accomplish this? Any help is really appreciated, thanks in advance!