24 lines
985 B
React
24 lines
985 B
React
/** Fortschrittsbalken fuer Roadmaps: Prozent + "x von y Knoten fertig". */
|
|
export default function RoadmapProgressBar({ progress, compact = false }) {
|
|
const { percent, done, total } = progress || { percent: 0, done: 0, total: 0 }
|
|
return (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: compact ? 120 : 180 }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12 }}>
|
|
<span className="muted">{percent}%</span>
|
|
{!compact && <span className="faint">{done} von {total} fertig</span>}
|
|
</div>
|
|
<div style={{ height: 6, borderRadius: 3, background: 'var(--border)', overflow: 'hidden' }}>
|
|
<div
|
|
style={{
|
|
width: `${percent}%`,
|
|
height: '100%',
|
|
borderRadius: 3,
|
|
background: percent >= 100 ? 'var(--ok, #22c55e)' : 'var(--accent, #3b82f6)',
|
|
transition: 'width 0.3s ease',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|