1 files changed, 74 insertions, 0 deletions
diff --git a/src/zoom/Paragraph.tsx b/src/zoom/Paragraph.tsx
new file mode 100644
index 0000000..285aab4
--- /dev/null
+++ b/src/zoom/Paragraph.tsx
@@ -0,0 +1,74 @@
+import React, { memo, useCallback, useEffect, useState } from "react";
+import { motion } from "motion/react";
+import type { ViewProps, LoadingStatus } from "./logic/types";
+import { NLP } from "sortug-ai";
+import Sentence from "./Sentence";
+import { paragraphVariants, createHoverEffect } from "./animations";
+import { useZoom } from "./hooks/useZoom";
+
+function Paragraph({ rawText, context, idx, doc, stanza }: ViewProps) {
+  const filterSegs = useCallback(() => {}, [rawText, doc.segments]);
+  useEffect(() => {
+    const relevantSegs = doc.segments.filter((seg) =>
+      rawText.includes(seg.text),
+    );
+    setSegs(relevantSegs);
+  }, [filterSegs]);
+  console.log(rawText);
+  console.log(doc.segments.length);
+  const [segs, setSegs] = useState<NLP.Spacy.Sentence[]>([]);
+
+  console.log(segs.length);
+  const { viewState, handleElementClick } = useZoom();
+  const { level, pIndex } = viewState;
+  const selected = pIndex === idx;
+  const isFocused = level === "paragraph" && selected;
+
+  // State for sentences
+  const [loading, setLoading] = useState<LoadingStatus>("pending");
+
+  return (
+    <>
+      <motion.div
+        key={idx + rawText}
+        className={`paragraph-wrapper ${selected ? "selected" : ""}`}
+        custom={selected}
+        variants={paragraphVariants}
+        initial="text"
+        animate={level}
+        onClick={(e) => handleElementClick(e, idx)}
+        whileHover={
+          level === "text"
+            ? createHoverEffect(level, "text", "255, 255, 200")
+            : {}
+        }
+      >
+        {loading === "loading" && <div className="spinner" />}
+        {level === "text" || !selected || segs.length === 0 ? (
+          <p className="paragraph">{rawText}</p>
+        ) : (
+          <div className="sentences-container">
+            {segs.map((sentence, sentIdx) => (
+              <Sentence
+                key={sentence.text + sentIdx}
+                idx={sentIdx}
+                rawText={sentence.text}
+                spacy={sentence}
+                context={{
+                  idx: sentIdx,
+                  parentText: rawText,
+                  segmented: segs.map((s) => s.text),
+                }}
+                doc={doc}
+                stanza={stanza}
+                stanzas={stanza?.segments[sentIdx]}
+              />
+            ))}
+          </div>
+        )}
+      </motion.div>
+    </>
+  );
+}
+
+export default memo(Paragraph);