\n {approach.name}\n

\n \n 🏥\n {approach.specialty.replace('-', ' ')}\n \n \n {getBodyRegionIcon(approach.bodyRegion)}\n {approach.bodyRegion.replace('-', ' ')}\n \n

\n\n

\n {approach.description}\n

\n\n {/* Navigation Tabs */}\n

\n {[\n { id: 'overview', label: 'Overview', icon: '📋' },\n { id: 'steps', label: 'Procedure Steps', icon: '📝' },\n { id: 'diagram', label: 'Anatomy Diagram', icon: '🎯' }\n ].map((tab) => (\n setActiveTab(tab.id as any)}\n className={`flex items-center space-x-2 py-4 px-2 border-b-2 font-medium text-sm ${\n activeTab === tab.id\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n {tab.icon}\n {tab.label}\n \n ))}\n

\n\n

\n {/* Overview Tab */}\n {activeTab === 'overview' && (\n

\n {/* Indications */}\n

\n ✅\n Indications\n

\n {approach.indications.map((indication, index) => (\n

\n •\n {indication}\n

\n ))}\n

\n\n {/* Contraindications */}\n

\n ❌\n Contraindications\n

\n {approach.contraindications.map((contraindication, index) => (\n

\n •\n {contraindication}\n

\n ))}\n

\n\n {/* Anatomical Landmarks */}\n

\n 📍\n Key Anatomical Landmarks\n

\n {approach.anatomicalLandmarks.map((landmark, index) => (\n

\n 📌\n {landmark}\n

\n ))}\n

\n\n {/* Complications */}\n

\n ⚠️\n Potential Complications\n

\n {approach.complications.map((complication, index) => (\n

\n ⚠\n {complication}\n

\n ))}\n

\n )}\n\n {/* Steps Tab */}\n {activeTab === 'steps' && (\n

\n 📝\n Surgical Procedure Steps\n

\n \n {approach.steps.map((step, index) => (\n

\n {step.stepNumber}\n

\n {step.title}\n

\n {step.description}\n

\n \n {/* Key Points */}\n {step.keyPoints.length > 0 && (\n

Key Points:

\n {point}\n

\n )}\n \n {/* Warnings */}\n {step.warnings && step.warnings.length > 0 && (\n

\n ⚠️\n Important Warnings:\n

\n {warning}\n

\n )}\n

\n ))}\n

\n )}\n\n {/* Diagram Tab */}\n {activeTab === 'diagram' && (\n

\n 🎯\n Anatomical Diagram\n

\n \n {approach.diagramData ? (\n \n ) : (\n

🎨

\n Diagram Coming Soon\n

\n Interactive anatomical diagram for this approach is being prepared.\n

\n )}\n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/Sanya56/SURGICALGALA/code/frontend/components/ApproachViewer.tsx","extension","actionData","errors"]