This is a solution to the Pricing component with toggle challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the component depending on their device's screen size
- Control the toggle with both their mouse/trackpad and their keyboard
- Mobile-first workflow
- React - JS library
- TypeScript
- Class Variance Authority (CVA)
- Headless UI - For switch button
- I create just one Component for Plan card and use CVA to crate variant.
- I pass down the data using context and control the overall state using Context Provider pattern.
- I will start learning more robust UI component library and it's tooling
- Class-Variance-Authority - This helped me to crate variant for my Plan Card
- Frontend Mentor - @HumbleLilaS