Initial commit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/sets/SetDetail.tsx

@@ -0,0 +1,33 @@
+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>
+  );
+}