Template
38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import type { HTMLAttributes } from 'react'
|
|
import { cn } from '../../utils/cn'
|
|
|
|
type ProgressProps = HTMLAttributes<HTMLDivElement> & {
|
|
value?: number
|
|
max?: number
|
|
indeterminate?: boolean
|
|
label?: string
|
|
}
|
|
|
|
export function Progress({
|
|
value = 0,
|
|
max = 100,
|
|
indeterminate = false,
|
|
label,
|
|
className,
|
|
...props
|
|
}: ProgressProps) {
|
|
const percentage = Math.min(Math.max(Math.round((value / max) * 100), 0), 100)
|
|
|
|
return (
|
|
<div className={cn('stack-xs', className)} {...props}>
|
|
{(label || !indeterminate) && (
|
|
<div className="flex-between" style={{ fontSize: 'var(--text-xs)', color: 'var(--muted-foreground)' }}>
|
|
{label && <span>{label}</span>}
|
|
{!indeterminate && <span style={{ fontFamily: 'var(--font-mono)' }}>{percentage}%</span>}
|
|
</div>
|
|
)}
|
|
<div className="progress-container">
|
|
<div
|
|
className={cn('progress-fill', indeterminate && 'progress-indeterminate')}
|
|
style={!indeterminate ? { width: `${percentage}%` } : undefined}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|