Refactor: Handle manual condition checks using `clsx`

[sboy99]

What would you like to share or ask?

As clsx library has the same and better potentials to handle class names of tailwindcss so using clsx would be better than manual conditioning.

Additional information

Try to replace each and every component that uses className attribute as a condition.

[AniketNS]

Hello @sboy99, I'd love to work on this issue. Please assign this to me.

[priyankarpal]

Hello @sboy99, I'd love to work on this issue. Please assign this to me.

Work on this issue & also share screenshots.

[AniketNS]

Hey @priyankarpal, will you please elaborate on the issue?

[priyankarpal]

Hey @priyankarpal, will you please elaborate on the issue?

clsx is a utility library that helps you manage multiple class names more efficiently. With clsx, you can easily conditionally add, remove, or toggle class names based on different states or props.

https://www.npmjs.com/package/clsx

[sboy99]

This is a technical issue. As most of the layouts and components in this project accept className attribute so what we did earlier was render conditionally. But this is nicely handled by clsx what it does is replace the class that might have a conflict. For example you are using w-4 as a utility class in the component and when you are calling the component from another component you passed the className w-12 so clsx will automatically detect that and will apply w-12 for this case else it will set the default one.

The task is to find out the layouts and components and change to clsx.

Why it is needed?? On that time We wasn't aware of the functionality of clsx but now. So small refactoring 😃

[AniketNS]

Thank you so much @sboy99, now I get the issue. I'm going to start working on it from now.

[sboy99]

@AniketNS Yup all the best 🙌