Health Dictionary

Comprehensive medical and health terminology

📖

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

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

\n\n {/* Category Filter */}\n

Filter by Category:

\n {categories.map(category => (\n setSelectedCategory(category.id)}\n className={`px-3 py-1 rounded-full text-sm transition-colors ${\n selectedCategory === category.id\n ? 'bg-blue-600 text-white'\n : 'bg-gray-100 text-gray-700 hover:bg-gray-200'\n }`}\n >\n {category.icon} {category.name}\n \n ))}\n

\n\n {/* Alphabet Filter */}\n

Browse by Letter:

\n setAlphabetFilter('all')}\n className={`px-2 py-1 rounded text-sm transition-colors ${\n alphabetFilter === 'all'\n ? 'bg-blue-600 text-white'\n : 'bg-gray-100 text-gray-700 hover:bg-gray-200'\n }`}\n >\n All\n \n {alphabet.map(letter => (\n setAlphabetFilter(letter)}\n className={`px-2 py-1 rounded text-sm transition-colors ${\n alphabetFilter === letter\n ? 'bg-blue-600 text-white'\n : 'bg-gray-100 text-gray-700 hover:bg-gray-200'\n }`}\n >\n {letter}\n \n ))}\n

\n\n

\n {/* Dictionary Entries List */}\n

\n Dictionary Entries ({filteredEntries.length})\n

\n \n

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

🔍

No entries found matching your search criteria.

Try adjusting your search terms or filters.

\n ) : (\n

\n {filteredEntries.map(entry => (\n handleEntryClick(entry)}\n className=\"p-4 hover:bg-gray-50 cursor-pointer transition-colors\"\n >\n

\n {entry.term}\n

\n {entry.pronunciation && (\n

\n /{entry.pronunciation}/\n

\n )}\n

\n {entry.definition}\n

\n \n {categories.find(cat => cat.id === entry.category)?.icon} {' '}\n {categories.find(cat => cat.id === entry.category)?.name}\n \n

\n \n

\n ))}\n

\n )}\n

\n\n {/* Selected Entry Details */}\n

\n {selectedEntry ? (\n

\n {selectedEntry.term}\n

\n \n {selectedEntry.pronunciation && (\n

\n /{selectedEntry.pronunciation}/\n

\n )}\n\n

\n \n {categories.find(cat => cat.id === selectedEntry.category)?.icon} {' '}\n {categories.find(cat => cat.id === selectedEntry.category)?.name}\n \n

\n\n

Definition

\n {selectedEntry.definition}\n

\n\n {selectedEntry.synonyms.length > 0 && (\n

Synonyms

\n {selectedEntry.synonyms.map((synonym, index) => (\n \n {synonym}\n \n ))}\n

\n )}\n\n {selectedEntry.examples && selectedEntry.examples.length > 0 && (\n

Examples

{example}

\n )}\n\n {selectedEntry.relatedTerms.length > 0 && (\n

Related Terms

\n {selectedEntry.relatedTerms.map((term, index) => (\n handleRelatedTermClick(term)}\n className=\"px-2 py-1 bg-blue-50 text-blue-600 rounded text-sm hover:bg-blue-100 transition-colors\"\n >\n {term}\n \n ))}\n

\n )}\n

\n ) : (\n

📖

Select a term from the list to view its detailed definition and related information.

\n )}\n

\n \n );\n};\n\nexport default HealthDictionary;","deleted","label",[169,170,151],"frontend","components","permalink","https://www.val.town/x/SIR_FESTUS/MYHEALTHSOURCE/code/frontend/components/HealthDictionary.tsx","extension","actionData","errors"]