File size: 2,882 Bytes
ce10613 |
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
import React from 'react';
function SolutionNavigator({ solutions, currentIndex, onIndexChange }) {
if (!solutions || solutions.length === 0) {
return null;
}
const currentSolution = solutions[currentIndex];
const nextSolution = () => {
if (currentIndex < solutions.length - 1) {
onIndexChange(currentIndex + 1);
}
};
const prevSolution = () => {
if (currentIndex > 0) {
onIndexChange(currentIndex - 1);
}
};
const goToSolution = (index) => {
onIndexChange(index);
};
return (
<div className="solution-navigator">
<div className="solution-header">
<h3>🎯 Solutions ({solutions.length} found)</h3>
{solutions.length > 1 && (
<div className="solution-controls">
<button
onClick={prevSolution}
disabled={currentIndex <= 0}
className="btn btn-sm btn-outline"
>
← Previous
</button>
<div className="solution-pagination">
{solutions.map((_, index) => (
<button
key={index}
onClick={() => goToSolution(index)}
className={`pagination-btn ${index === currentIndex ? 'active' : ''}`}
>
{index + 1}
</button>
))}
</div>
<button
onClick={nextSolution}
disabled={currentIndex >= solutions.length - 1}
className="btn btn-sm btn-outline"
>
Next →
</button>
</div>
)}
</div>
<div className="solution-display">
<div className="solution-info">
<span className="solution-counter">
Solution {currentIndex + 1} of {solutions.length}
</span>
</div>
<div className="solution-table-container">
{currentSolution.header && currentSolution.rows ? (
<table className="solution-table">
<thead>
<tr>
{currentSolution.header.map((header, index) => (
<th key={index}>{header}</th>
))}
</tr>
</thead>
<tbody>
{currentSolution.rows.map((row, rowIndex) => (
<tr key={rowIndex}>
{row.map((cell, cellIndex) => (
<td key={cellIndex}>{cell}</td>
))}
</tr>
))}
</tbody>
</table>
) : (
<div className="solution-json">
<pre>{JSON.stringify(currentSolution, null, 2)}</pre>
</div>
)}
</div>
</div>
</div>
);
}
export default SolutionNavigator; |