src/zoom/Sentence.tsx


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
47
48
49
50
51
52
53
54
55

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";
import StanzaClause from "./StanzaClause";

interface Props extends ViewProps {
  spacy: NLP.Spacy.Sentence;
  stanzas?: NLP.Stanza.Sentence | undefined;
}

function Sentence(props: Props) {
  const { spacy, stanzas, 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>
        ) : stanzas ? (
          <StanzaClause
            {...props}
            sentence={stanzas}
            rawText={stanzas.text}
            data={stanzas.constituency}
          />
        ) : (
          <SpacyClause sentence={spacy} />
        )}
      </motion.span>
    </>
  );
}

export default memo(Sentence);