Skip to content

Commit 7911882

Browse files
committed
Add visual feedback for translated words
- Add hasBeenTranslated state to track clicked words - Mark words as translated when clicked - Add dotted blue underline styling for translated words - This provides visual feedback that words have been translated - Only applies to current question session
1 parent ba4dee6 commit 7911882

File tree

1 file changed

+6
-0
lines changed

1 file changed

+6
-0
lines changed

app/components/TextGenerator/TranslatableWord.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const TranslatableWord = memo(
2424
const [translation, setTranslation] = useState<string | null>(null);
2525
const [isLoading, setIsLoading] = useState(false);
2626
const [isSpeaking, setIsSpeaking] = useState(false);
27+
const [hasBeenTranslated, setHasBeenTranslated] = useState(false);
2728

2829
const {
2930
speakText,
@@ -124,6 +125,9 @@ const TranslatableWord = memo(
124125
setIsSpeaking(false);
125126
}, 1000);
126127

128+
// Mark as translated when clicked
129+
setHasBeenTranslated(true);
130+
127131
if (shouldTranslate && !translation) {
128132
const canAttemptTranslation =
129133
hover.progressionPhase === 'initial' || hover.creditsAvailable > 0;
@@ -160,6 +164,8 @@ const TranslatableWord = memo(
160164
combinedClassName += ' bg-blue-500 text-white';
161165
} else if (isSpeaking) {
162166
combinedClassName += ' bg-green-500 text-white animate-pulse';
167+
} else if (hasBeenTranslated) {
168+
combinedClassName += ' border-b border-dotted border-blue-400';
163169
} else {
164170
if (hover.progressionPhase !== 'credits' || hover.creditsAvailable > 0) {
165171
combinedClassName += ' hover:underline';

0 commit comments

Comments
 (0)