36 lines
797 B
JavaScript
36 lines
797 B
JavaScript
import React from 'react';
|
|
import { Button } from '@edx/paragon';
|
|
import UnitButton from './UnitButton';
|
|
|
|
export default function SequenceNavigation({
|
|
onNext,
|
|
onPrevious,
|
|
onNavigate,
|
|
units,
|
|
isLocked,
|
|
showCompletion,
|
|
}) {
|
|
const unitButtons = units.map((unit, index) => (
|
|
<UnitButton
|
|
key={unit.id}
|
|
{...unit}
|
|
isComplete={showCompletion && unit.complete}
|
|
onClick={onNavigate.bind(null, index)}
|
|
/>
|
|
));
|
|
|
|
return (
|
|
<nav className="flex-grow-0 d-flex w-100 btn-group">
|
|
<Button className="btn-outline-primary" onClick={onPrevious}>
|
|
Previous
|
|
</Button>
|
|
|
|
{isLocked ? <UnitButton type="lock" isActive /> : unitButtons}
|
|
|
|
<Button className="btn-outline-primary" onClick={onNext}>
|
|
Next
|
|
</Button>
|
|
</nav>
|
|
);
|
|
}
|