blob: 1d90346770164254c8ab38733802cc5542572875 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
import React, { memo } from "react";
import { motion } from "motion/react";
import type { ViewProps, LoadingStatus } from "./logic/types";
import { NLP } from "sortug-ai";
import SpacyClause from "./SpacyClause";
import { sentenceVariants, createHoverEffect } from "./animations";
import { useZoom } from "./hooks/useZoom";
interface Props extends ViewProps {
spacy: NLP.Spacy.Sentence;
stanza?: NLP.Stanza.Sentence;
}
function Sentence({ spacy, stanza, context, idx }: Props) {
const { viewState, handleElementClick } = useZoom();
const { level, sIndex } = viewState;
const selected = sIndex === idx;
const isFocused = level === "sentence" && selected;
return (
<>
<motion.span
key={idx + spacy.text}
className={`sentence-wrapper ${selected ? "selected" : ""}`}
custom={selected}
variants={sentenceVariants}
initial="paragraph"
animate={level}
onClick={(e) => handleElementClick(e, idx)}
whileHover={
level === "paragraph"
? createHoverEffect(level, "paragraph", "200, 220, 255")
: {}
}
>
{level === "paragraph" || !selected ? (
<span className="sentence">{spacy.text}</span>
) : (
<SpacyClause sentence={spacy} />
)}
</motion.span>
</>
);
}
export default memo(Sentence);
|
