ChapterCard.js
2 months ago
LearnPage.js
2 months ago
LearnPageSkeleton.js
2 months ago
ProgressPill.js
2 months ago
ScreenshotDialog.js
2 months ago
SetupCompleteCard.js
2 months ago
StepItem.js
2 months ago
useLearnProgress.js
2 months ago
ProgressPill.js
22 lines
| 1 | import { Check } from 'lucide-react'; |
| 2 | |
| 3 | const ProgressPill = ( { completed, total } ) => { |
| 4 | const isComplete = total > 0 && completed === total; |
| 5 | |
| 6 | const base = |
| 7 | 'inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium border border-solid'; |
| 8 | |
| 9 | const style = isComplete |
| 10 | ? 'bg-brand-background-50 text-brand-hover-700 border-brand-background-hover-100' |
| 11 | : 'bg-background-secondary text-text-secondary border-border-subtle'; |
| 12 | |
| 13 | return ( |
| 14 | <span className={ `${ base } ${ style }` }> |
| 15 | { isComplete && <Check className="w-3 h-3" /> } |
| 16 | { completed }/{ total } |
| 17 | </span> |
| 18 | ); |
| 19 | }; |
| 20 | |
| 21 | export default ProgressPill; |
| 22 |