From c0d4f59c98fe107939a7db4894ff56e1ff0b5520 Mon Sep 17 00:00:00 2001
From: Aitov Ratmir <ratmirslv@gmail.com>
Date: Sat, 27 Jan 2024 19:49:02 +0300
Subject: [PATCH] chore: add highlighting of subtitles on hover

---
 components/Word.tsx | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/components/Word.tsx b/components/Word.tsx
index cde563f..718c32e 100644
--- a/components/Word.tsx
+++ b/components/Word.tsx
@@ -1,5 +1,6 @@
 import { Popover, Text } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
+import { useRef } from 'react'
 
 import TranslateWordPopup from './TranslateWordPopup'
 
@@ -12,8 +13,23 @@ interface WordProps {
 
 function Word(props: WordProps) {
 	const [opened, { close, open }] = useDisclosure(false)
-
+	const wordRef = useRef<HTMLDivElement>(null)
 	const debouncedOpen = useDebounce(opened, 400)
+
+	const handleMouseEnter = () => {
+		if (wordRef.current) {
+			wordRef.current.style.color = '#359dff'
+		}
+		open()
+	}
+
+	const handleMouseLeave = () => {
+		if (wordRef.current) {
+			wordRef.current.style.color = '#ffffff'
+		}
+		close()
+	}
+
 	return (
 		<Popover
 			width={200}
@@ -22,7 +38,13 @@ function Word(props: WordProps) {
 			offset={{ mainAxis: 0, crossAxis: 5 }}
 		>
 			<Popover.Target>
-				<Text span size="xl" onMouseEnter={open} onMouseLeave={close}>
+				<Text
+					span
+					size="xl"
+					onMouseEnter={handleMouseEnter}
+					onMouseLeave={handleMouseLeave}
+					ref={wordRef}
+				>
 					{`${props.word} `}
 					<Popover.Dropdown>
 						<TranslateWordPopup word={clearWord(props.word)} />