34 lines
1.3 KiB
TypeScript
Executable File
34 lines
1.3 KiB
TypeScript
Executable File
import type { TrainingSet } from '../../types';
|
|
import { MUSCLE_GROUP_LABELS, MUSCLE_GROUP_COLORS } from '../../types';
|
|
|
|
interface SetDetailProps {
|
|
trainingSet: TrainingSet;
|
|
}
|
|
|
|
export function SetDetail({ trainingSet }: SetDetailProps) {
|
|
return (
|
|
<div className="bg-gray-900 border border-gray-800 rounded-xl p-4">
|
|
<h3 className="font-semibold text-gray-100 text-lg mb-3">{trainingSet.name}</h3>
|
|
{(!trainingSet.exercises || trainingSet.exercises.length === 0) ? (
|
|
<p className="text-gray-500 text-sm">Keine Übungen in diesem Set.</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{trainingSet.exercises.map((ex, index) => {
|
|
const label = MUSCLE_GROUP_LABELS[ex.muscle_group] || ex.muscle_group;
|
|
const color = MUSCLE_GROUP_COLORS[ex.muscle_group] || 'bg-gray-600';
|
|
return (
|
|
<div key={ex.id} className="flex items-center gap-3 bg-gray-800 rounded-lg px-3 py-2">
|
|
<span className="text-gray-500 text-sm w-6">{index + 1}.</span>
|
|
<span className="flex-1 text-gray-200">{ex.name}</span>
|
|
<span className={`${color} text-white text-xs px-2 py-1 rounded-full`}>
|
|
{label}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|