Design a progress tracking component for an online course platform.
I'll design a progress tracking component for an online course platform. This component will display the overall course progress, individual module progress, and allow users to navigate to different modules. Let's create a React component that achieves this functionality.
This progress tracking component for an online course platform includes the following features:
The useCourseProgress
hook manages the state of the course progress, which in a real application would likely be connected to a backend API or state management system. The CourseProgressTracker
component renders the overall progress and a list of modules with their individual progress bars.
Users can interact with the "Continue" buttons to update the progress of each module, which in turn updates the overall course progress. The component is wrapped in a Card for a clean, contained look, and uses Progress components from shadcn/ui for consistent styling.
This component is fully responsive and will look good on both desktop and mobile devices. You can further customize the styling or add more features as needed for your specific online course platform.