musculo externo abdome

frontend/src/components/StructureInfoPanel.tsx

@@ -1,6 +1,6 @@
 import { useAtlasStore } from "../store/useAtlasStore.js";
 import type { Structure } from "../lib/api.js";
-import { MUSCLE_REFERENCE_IMAGE, hasMuscleReferenceImage } from "../data/muscleReferenceImages.js";
+import { muscleReferenceImageFor } from "../data/muscleReferenceImages.js";
 
 export function StructureInfoPanel({
   bySlug,
@@ -60,17 +60,16 @@ export function StructureInfoPanel({
         <p className="text-sm text-slate-300 leading-relaxed">{structure.description}</p>
       )}
 
-      {hasMuscleReferenceImage(structure.slug) && (
-        <div className="rounded-lg border border-white/10 bg-white p-2">
-          <img
-            src={MUSCLE_REFERENCE_IMAGE.image}
-            alt="Ilustração clássica da parede abdominal mostrando reto do abdome, oblíquo externo e serrátil anterior"
-            className="w-full h-auto rounded"
-          />
-          <p className="text-xs text-slate-600 mt-2 leading-snug">{MUSCLE_REFERENCE_IMAGE.caption}</p>
-          <p className="text-[11px] text-slate-500 mt-1">{MUSCLE_REFERENCE_IMAGE.credit}</p>
-        </div>
-      )}
+      {(() => {
+        const ref = muscleReferenceImageFor(structure.slug);
+        if (!ref) return null;
+        return (
+          <div className="rounded-lg border border-white/10 bg-white p-2">
+            <img src={ref.image} alt={ref.caption} className="w-full h-auto rounded" />
+            <p className="text-xs text-slate-600 mt-2 leading-snug">{ref.caption}</p>
+          </div>
+        );
+      })()}
 
       {structure.regionPath.length > 0 && (
         <p className="text-xs text-slate-500">{structure.regionPath.join(" › ")}</p>