\n {/* Search and Filters */}\n

\n {/* Search Bar */}\n

\n onSearch(e.target.value)}\n className=\"w-full px-4 py-3 pl-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n 🔍\n

\n\n {/* Specialty Filters */}\n

Filter by Specialty

\n onSpecialtyFilter('all')}\n className={`filter-button px-4 py-2 rounded-lg text-sm font-medium ${\n selectedSpecialty === 'all' ? 'active' : 'bg-gray-100 text-gray-700'\n }`}\n >\n All Specialties\n \n {specialties.map((specialty) => (\n onSpecialtyFilter(specialty.id)}\n className={`filter-button px-4 py-2 rounded-lg text-sm font-medium flex items-center space-x-2 ${\n selectedSpecialty === specialty.id ? 'active' : 'bg-gray-100 text-gray-700'\n }`}\n >\n {getSpecialtyIcon(specialty.id)}\n {specialty.name}\n \n ))}\n

\n\n {/* Body Region Filters */}\n

Filter by Body Region

\n onBodyRegionFilter('all')}\n className={`filter-button px-4 py-2 rounded-lg text-sm font-medium ${\n selectedBodyRegion === 'all' ? 'active' : 'bg-gray-100 text-gray-700'\n }`}\n >\n All Regions\n \n {bodyRegions.map((region) => (\n onBodyRegionFilter(region.id)}\n className={`filter-button px-4 py-2 rounded-lg text-sm font-medium flex items-center space-x-2 ${\n selectedBodyRegion === region.id ? 'active' : 'bg-gray-100 text-gray-700'\n }`}\n >\n {getBodyRegionIcon(region.id)}\n {region.name}\n \n ))}\n

\n\n {/* Loading State */}\n {loading && (\n

Loading approaches...

\n )}\n\n {/* Results */}\n {!loading && (\n

\n Surgical Approaches ({approaches.length})\n

\n {searchQuery && (\n

\n Results for \"{searchQuery}\"\n

\n )}\n

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

🔍

No approaches found

\n Try adjusting your search terms or filters to find what you're looking for.\n

\n ) : (\n

\n {approaches.map((approach) => (\n onApproachSelect(approach)}\n className=\"approach-card bg-white rounded-xl shadow-lg p-6 cursor-pointer\"\n >\n

\n {getSpecialtyIcon(approach.specialty)}\n

\n {approach.name}\n

\n {getBodyRegionIcon(approach.bodyRegion)} {approach.bodyRegion}\n

\n\n

\n {approach.description}\n

\n\n

\n {/* Indications */}\n

INDICATIONS

\n {approach.indications.slice(0, 2).map((indication, index) => (\n \n {indication}\n \n ))}\n {approach.indications.length > 2 && (\n \n +{approach.indications.length - 2} more\n \n )}\n

\n\n {/* Key Landmarks */}\n

KEY LANDMARKS

\n {approach.anatomicalLandmarks.slice(0, 2).map((landmark, index) => (\n \n {landmark}\n \n ))}\n {approach.anatomicalLandmarks.length > 2 && (\n \n +{approach.anatomicalLandmarks.length - 2} more\n \n )}\n

\n\n

\n {approach.steps.length} steps\n View Details →\n

\n ))}\n

\n )}\n

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