1 files changed, 46 insertions, 0 deletions
diff --git a/packages/prosody-ui/src/zoom/Sentence.tsx b/packages/prosody-ui/src/zoom/Sentence.tsx
new file mode 100644
index 0000000..1d90346
--- /dev/null
+++ b/packages/prosody-ui/src/zoom/Sentence.tsx
@@ -0,0 +1,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);