diff --git a/src/app/decks/[deck_id]/learn/Memorize.tsx b/src/app/decks/[deck_id]/learn/Memorize.tsx index 9a350a9..8cc64cc 100644 --- a/src/app/decks/[deck_id]/learn/Memorize.tsx +++ b/src/app/decks/[deck_id]/learn/Memorize.tsx @@ -83,13 +83,25 @@ const Memorize: React.FC = ({ deckId, deckName }) => { return card.word; }; - const getBackText = (card: ActionOutputCard): string => { + const getBackContent = (card: ActionOutputCard): React.ReactNode => { if (isReversed) { - return card.word; + return {card.word}; } - return card.meanings.map((m) => - m.partOfSpeech ? `${m.partOfSpeech}: ${m.definition}` : m.definition - ).join("; "); + + return ( + + {card.meanings.map((m, idx) => ( +
+ {m.partOfSpeech && ( + + {m.partOfSpeech} + + )} + {m.definition} +
+ ))} +
+ ); }; const handleShowAnswer = useCallback(() => { @@ -237,7 +249,6 @@ const Memorize: React.FC = ({ deckId, deckName }) => { const currentCard = getCurrentCard()!; const displayFront = getFrontText(currentCard); - const displayBack = getBackText(currentCard); return ( @@ -308,9 +319,7 @@ const Memorize: React.FC = ({ deckId, deckName }) => { {currentCard.ipa} )} -
- {displayBack} -
+ {getBackContent(currentCard)} )} @@ -326,11 +335,9 @@ const Memorize: React.FC = ({ deckId, deckName }) => { {showAnswer && ( <>
- -
- {displayBack} -
-
+ + {getBackContent(currentCard)} + )}