1 files changed, 98 insertions, 0 deletions
diff --git a/src/zoom/App.tsx b/src/zoom/App.tsx
new file mode 100644
index 0000000..d41dd7f
--- /dev/null
+++ b/src/zoom/App.tsx
@@ -0,0 +1,98 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import FullText from "./FullText";
+import "./zoom.css";
+import { useZoom, ZoomProvider } from "./hooks/useZoom";
+import { NLP } from "sortug-ai";
+import { Loader2 } from "lucide-react";
+
+const App: React.FC = () => {
+  const { viewState } = useZoom();
+  const [isLoading, setLoading] = useState(true);
+  const [spacy, setSpacy] = useState<NLP.Spacy.SpacyRes>();
+  const [stanza, setStanza] = useState<NLP.Stanza.StanzaRes>();
+  useEffect(() => {
+    const sp = sessionStorage.getItem("spacyres");
+    const st = sessionStorage.getItem("stanzares");
+    if (sp) setSpacy(JSON.parse(sp));
+    if (st) setStanza(JSON.parse(st));
+    setLoading(false);
+  }, []);
+  console.log(viewState.level, "level");
+  return (
+    <>
+      <motion.header
+        className="app-header"
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.2, duration: 0.5 }}
+      >
+        <p className="instructions">
+          Click on any text element to zoom in, exploring language from:
+          <br />
+          <span>
+            <span className={viewState.level === "text" ? "highlight" : ""}>
+              Text
+            </span>
+            <span>→</span>
+            <span
+              className={viewState.level === "paragraph" ? "highlight" : ""}
+            >
+              Paragraph
+            </span>
+            <span>→</span>
+            <span className={viewState.level === "sentence" ? "highlight" : ""}>
+              Sentence
+            </span>
+            <span>→</span>
+            <span className={viewState.level === "clause" ? "highlight" : ""}>
+              Clause
+            </span>
+            <span>→</span>
+            <span className={viewState.level === "word" ? "highlight" : ""}>
+              Word
+            </span>
+            <span>→</span>
+            <span className={viewState.level === "syllable" ? "highlight" : ""}>
+              Syllable
+            </span>
+            <span>→</span>
+            <span className={viewState.level === "phoneme" ? "highlight" : ""}>
+              Phoneme
+            </span>
+          </span>
+          <br />
+          Click the Back button or on empty space to return to the previous
+          level.
+        </p>
+      </motion.header>
+
+      <main>
+        {isLoading ? (
+          <Loader2 />
+        ) : spacy ? (
+          <FullText text={spacy.input} doc={spacy} stanza={stanza} />
+        ) : (
+          <p>Oops</p>
+        )}
+      </main>
+
+      <motion.footer
+        className="app-footer"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 0.7 }}
+        transition={{ delay: 1.5 }}
+      >
+        <p>A language learning tool with seamless zoom animations</p>
+      </motion.footer>
+    </>
+  );
+};
+export default function () {
+  return (
+    <ZoomProvider>
+      <App />
+    </ZoomProvider>
+  );
+}