[FEAT] Improve 'Code' Tab On Component Pages To Prepare For TypeScript Support

[DivyanshuLohani]

Description
I noticed the project doesn't use typescipt and uses javascript

Proposal
Add typescript support for the components

[DavidHDev]

Hello @DivyanshuLohani , adding typescript support would mean redesigning the whole "Code" section of the component pages, so that it offers a user-friendly experience and makes it easy to select your preferred technologies, but it's definitely an improvement I'll consider for the future.

For now, since this is just a copy paste library, it's pretty easy to just convert the components you want to use in order for them to work with TS in your projects.

I'll rename this issue to better suggest what needs to be done.

[DivyanshuLohani]

I'm quite working on converting the library to have types that will commit till the end of next week.

Should I open a draft PR?

[DavidHDev]

@DivyanshuLohani no need, I plan to do it myself, as I said it's not just about converting the components (that's the easy part), the whole Code page would need a redesign and I want to handle it myself. When that's ready, any component will be easily converted to TS, or rather, have a TS version alongside the plain JS one, just like we have Tailwind or plain CSS for most of the components.

[DivyanshuLohani]

Ok np

[DavidHDev]

I'm happy to announce TypeScript support has been added in f2e590e!

The "Code" tab now has a new dropdown which allows you to toggle between JS and TS!
Now, users can pick one of 4 versions of a component to use:

• JS + CSS
• JS + Tailwind
• TS + CSS
• TS + Tailwind

This maintains React Bits' goal of not limiting its users to one technology choice, giving you all the flexibility your projects need!

Unfortunately, it will take me a very long time to create TS versions of all the components, so any help in this area would be appreciated! I will be opening an issue for this as well.

Thank you for your understanding and patience, and I hope you can continue to enjoy this library!

CC: @DivyanshuLohani