From 912a7f8e997736636088c83dc6b2e3a9e49c3448 Mon Sep 17 00:00:00 2001
From: lingdocs <71590811+lingdocs@users.noreply.github.com>
Date: Tue, 12 Apr 2022 17:19:33 +0500
Subject: [PATCH] up

---
 src/components/VPBuilder.tsx | 43 ++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 src/components/VPBuilder.tsx

diff --git a/src/components/VPBuilder.tsx b/src/components/VPBuilder.tsx
new file mode 100644
index 0000000..2af3b53
--- /dev/null
+++ b/src/components/VPBuilder.tsx
@@ -0,0 +1,43 @@
+import {
+    defaultTextOptions,
+    VPExplorer,
+    EntrySelect,
+    Types as T,
+} from "@lingdocs/pashto-inflector";
+import {
+    nouns,
+    verbs,
+} from "../words/words";
+import { useStickyState } from "@lingdocs/pashto-inflector";
+
+function VPBuilder() {
+    const [entry, setEntry] = useStickyState<T.VerbEntry | undefined>(undefined, "vEntrySelect");
+    return <div>
+        <div style={{ maxWidth: "300px" }}>
+            <div className="h5">Verb:</div>
+            <EntrySelect
+                value={entry}
+                onChange={setEntry}
+                entries={verbs}
+                opts={defaultTextOptions}
+                isVerbSelect
+                name="Verb"
+            />
+        </div>
+        <div style={{ margin: "0 auto" }}>
+        {entry
+            ? <VPExplorer
+                verb={entry}
+                opts={defaultTextOptions}
+                nouns={nouns}
+                verbs={verbs}
+            />
+            : <div className="lead">
+                Choose a verb to start building
+            </div>}
+        </div>
+    </div>;
+
+}
+
+export default VPBuilder;