Spaces:
Running
Running
File size: 4,526 Bytes
ba95018 | 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 103 104 105 106 107 108 109 110 111 112 113 114 115 | import { useForm } from '../../context/FormContext';
import { Check } from 'lucide-react';
export default function ExerciseList({ field, sectionId }) {
const { formState, toggleExercise, updateExerciseValue } = useForm();
const fieldState = formState.sections[sectionId]?.[field.id] || { exercises: {} };
const exercises = fieldState.exercises || {};
return (
<div className="exercise-list" id={`field-${field.id}`}>
<div className="exercise-list__label">{field.label}</div>
{field.exercises.map(ex => {
const exState = exercises[ex.id] || { enabled: false, sets: '', reps: '', minutes: '', seconds: '', trials: '', steps: '' };
const isActive = exState.enabled;
return (
<div
key={ex.id}
className={`exercise-item ${isActive ? 'exercise-item--active' : ''}`}
>
<div
className="exercise-item__toggle"
onClick={() => toggleExercise(sectionId, field.id, ex.id)}
>
{isActive && <Check size={12} strokeWidth={3} />}
</div>
<span
className="exercise-item__name"
onClick={() => toggleExercise(sectionId, field.id, ex.id)}
>
{ex.name}
</span>
{isActive && (
<div className="exercise-item__inputs">
{ex.usesMinutes ? (
<>
<input
type="number"
className="exercise-item__input"
placeholder="min"
value={exState.minutes}
onChange={e => updateExerciseValue(sectionId, field.id, ex.id, 'minutes', e.target.value)}
min="0"
/>
<span className="exercise-item__unit">min</span>
</>
) : ex.usesSeconds ? (
<>
<input
type="number"
className="exercise-item__input"
placeholder="sec"
value={exState.seconds}
onChange={e => updateExerciseValue(sectionId, field.id, ex.id, 'seconds', e.target.value)}
min="0"
/>
<span className="exercise-item__unit">sec</span>
<span className="exercise-item__separator">×</span>
<input
type="number"
className="exercise-item__input"
placeholder="reps"
value={exState.reps}
onChange={e => updateExerciseValue(sectionId, field.id, ex.id, 'reps', e.target.value)}
min="0"
/>
<span className="exercise-item__unit">reps</span>
</>
) : ex.usesTrials ? (
<>
<input
type="number"
className="exercise-item__input"
placeholder="#"
value={exState.trials}
onChange={e => updateExerciseValue(sectionId, field.id, ex.id, 'trials', e.target.value)}
min="0"
/>
<span className="exercise-item__unit">{ex.usesSteps ? 'steps' : 'trials'}</span>
</>
) : (
<>
<input
type="number"
className="exercise-item__input"
placeholder="sets"
value={exState.sets}
onChange={e => updateExerciseValue(sectionId, field.id, ex.id, 'sets', e.target.value)}
min="0"
/>
<span className="exercise-item__separator">×</span>
<input
type="number"
className="exercise-item__input"
placeholder="reps"
value={exState.reps}
onChange={e => updateExerciseValue(sectionId, field.id, ex.id, 'reps', e.target.value)}
min="0"
/>
<span className="exercise-item__unit">reps</span>
</>
)}
</div>
)}
</div>
);
})}
</div>
);
}
|