ProgressBar Component

The ProgressBar component is a versatile UI element used to visually represent the progress of a task or process. It features customizable options such as color, label, and description.

Props

• progress (number, required): The progress percentage (0 to 100). The component ensures the value is clamped between 0 and 100.
• color (oneOf: 'blue', 'red', 'orange', 'green', default: 'blue'): The color of the progress bar.
• label (string, default: ''): A label displayed above the progress bar. Provides context such as "Progress" or "Completion".
• description (string, default: ''): A description displayed below the progress bar. Used for additional context or instructions.
• descriptionLink (object, default: ): An optional link in the description area. Contains:
  • label (string): The text for the link.
  • href (string): The URL for the link. -className (string, default: ''): Additional CSS classes for custom styling.

Usage Example

import React from 'react';
import ProgressBar from './ProgressBar';

function App() {
  return (
    <div>
      <h1>Task Progress</h1>
      <ProgressBar
        progress={75}
        color="green"
        label="Upload Progress"
        description="Uploading files to the server."
        descriptionLink={{ label: 'View Details', href: '/details' }}
      />
    </div>
  );
}

export default App;

Dependencies

Repository	Usage Count
frontend-app-staff-dashboard	5
frontend-app-dashboard	2
frontend-app-learning	1

Detailed usage locations:

frontend-app-staff-dashboard

• src/components/CourseCard.jsx
• src/pages/billing/index.jsx
• src/pages/home/enrollment-table/index.jsx
• src/pages/home/enrollment-table/page.jsx
• src/pages/student-progress/course-summary-table/index.jsx

frontend-app-dashboard

• src/components/RecentActivityCard.jsx
• src/pages/progress/course-summary-table/index.jsx

frontend-app-learning

• src/course-home/outline-tab/widgets/StartOrResumeCourseCard.jsx