\n {/* Header */}\n

Workout Library

\n Filter by difficulty:\n setFilterDifficulty(e.target.value)}\n className=\"rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500\"\n >\n \n \n \n \n \n

\n\n {filteredWorkouts.length === 0 ? (\n

No workouts found

\n ) : (\n

\n {/* Workout List */}\n

\n Workouts ({filteredWorkouts.length})\n

\n {filteredWorkouts.map((workout) => (\n setSelectedWorkout(workout)}\n className={`bg-white rounded-lg shadow-md p-6 cursor-pointer card-hover transition-all ${\n selectedWorkout?.id === workout.id ? 'ring-2 ring-blue-500 bg-blue-50' : ''\n }`}\n >\n

\n {workout.name}\n

\n \n {workout.difficulty_level}\n \n

\n \n

\n {workout.description}\n

\n \n

\n ⏱️\n {formatDuration(workout.duration_minutes)}\n

\n 🏋️\n {workout.exercises.length} exercises\n

\n {workout.equipment_needed.length > 0 && (\n

\n 🛠️\n \n {workout.equipment_needed.join(', ')}\n \n

\n )}\n

\n ))}\n

\n\n {/* Workout Details */}\n

\n {selectedWorkout ? selectedWorkout.name : 'Select a Workout'}\n

\n {!selectedWorkout ? (\n

\n Click on a workout to view details\n

\n ) : (\n

\n {/* Workout Info */}\n

\n \n {selectedWorkout.difficulty_level}\n \n \n {formatDuration(selectedWorkout.duration_minutes)}\n \n

\n {selectedWorkout.description}\n

\n \n {selectedWorkout.equipment_needed.length > 0 && (\n

Equipment Needed:

\n {selectedWorkout.equipment_needed.map((equipment, index) => (\n \n {equipment}\n \n ))}\n

\n )}\n

\n\n {/* Exercises */}\n

\n Exercises ({selectedWorkout.exercises.length})\n

\n {selectedWorkout.exercises.map((exercise, index) => (\n \n

\n {index + 1}. {exercise.name}\n

\n \n {formatExercise(exercise)}\n \n

\n {exercise.description}\n

\n ))}\n

\n\n {/* Action Button */}\n

\n \n

\n )}\n

\n \n )}\n \n );\n}","deleted","label",[168,169,150],"frontend","components","permalink","https://www.val.town/x/newbienate/my-first-val/code/frontend/components/WorkoutLibrary.tsx","extension","actionData","errors"]