Spaces:
Sleeping
Sleeping
File size: 2,465 Bytes
a706099 f1b7f9a a706099 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
const ChunkNavigation = ({
currentChunkIndex,
documentData,
chunkStates,
goToPrevChunk,
goToNextChunk
}) => {
return (
<div className="flex items-center justify-center gap-4 mb-4 px-4">
<button
onClick={goToPrevChunk}
disabled={currentChunkIndex === 0}
className="p-3 bg-white hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed rounded-lg shadow-sm transition-all"
>
<svg className="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={3}>
<path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</button>
<div className="flex space-x-2">
{documentData?.chunks?.map((_, index) => (
<div
key={index}
className={`w-3 h-3 rounded-full ${
index === currentChunkIndex ? (
chunkStates[index] === 'understood' ? 'bg-green-700' :
chunkStates[index] === 'skipped' ? 'bg-red-700' :
chunkStates[index] === 'interactive' ? 'bg-blue-700' :
'bg-gray-600'
) : (
chunkStates[index] === 'understood' ? 'bg-green-500' :
chunkStates[index] === 'skipped' ? 'bg-red-500' :
chunkStates[index] === 'interactive' ? 'bg-blue-500' :
'bg-gray-300'
)
}`}
/>
))}
</div>
<button
onClick={goToNextChunk}
disabled={!documentData?.chunks || currentChunkIndex === documentData.chunks.length - 1}
className="p-3 bg-white hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed rounded-lg shadow-sm transition-all"
>
<svg className="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={3}>
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
);
};
export default ChunkNavigation; |