French Vocabulary

\n \n

\n \n Filter by Category\n \n onSelectCategory(e.target.value ? parseInt(e.target.value) : null)}\n className=\"w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500\"\n >\n \n {categories.map(category => (\n \n ))}\n \n

\n \n

\n \n Search\n \n setSearchTerm(e.target.value)}\n placeholder=\"Search French or English words...\"\n className=\"w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500\"\n />\n

\n \n {Object.keys(groupedVocabulary).length === 0 ? (\n

No vocabulary items found. Try changing your filters.

\n ) : (\n Object.entries(groupedVocabulary).map(([categoryName, items]) => (\n

{categoryName}

\n \n

\n {items.map(item => (\n

toggleCardFlip(item.id)}\n >\n

{item.french}

Click to see translation

{item.english}

\n {item.example_sentence && (\n

{item.example_sentence}

\n )}\n

\n ))}\n

\n ))\n )}\n

\n );\n};\n\nexport default VocabularyPage;","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/td1/Crossword/code/frontend/components/VocabularyPage.tsx","extension","actionData","errors"]