1 files changed, 60 insertions, 0 deletions
diff --git a/packages/ui/components/QueryInput.tsx b/packages/ui/components/QueryInput.tsx
new file mode 100644
index 00000000..ba476dda
--- /dev/null
+++ b/packages/ui/components/QueryInput.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import Divider from "../shadcn/divider";
+import { ArrowRightIcon } from "../icons";
+import Image from "next/image";
+
+function QueryInput() {
+  return (
+    <div>
+      <div className="bg-secondary rounded-[20px] h-[68 px]">
+        {/* input and action button */}
+        <form className="flex gap-4 p-2.5">
+          <textarea
+            name="q"
+            cols={30}
+            rows={4}
+            className="bg-transparent h-12 focus:h-[128px] no-scrollbar pt-3 px-2 text-base placeholder:text-[#5D6165] text-[#9DA0A4] focus:text-white duration-200 tracking-[3%] outline-none resize-none w-full"
+            placeholder="Ask your second brain..."
+            // onKeyDown={(e) => {
+            //   if (e.key === "Enter") {
+            //     e.preventDefault();
+            //     if (!e.shiftKey) push(parseQ());
+            //   }
+            // }}
+            // onChange={(e) => setQ(e.target.value)}
+            // value={q}
+            // disabled={disabled}
+          />
+
+          <button
+            // type="submit"
+            // onClick={e => e.preventDefault()}
+            // disabled={disabled}
+            className="h-12 w-12 rounded-[14px] bg-[#21303D] all-center shrink-0 hover:brightness-125 duration-200 outline-none focus:outline focus:outline-primary active:scale-90"
+          >
+            <Image src={ArrowRightIcon} alt="Right arrow icon" />
+          </button>
+        </form>
+
+        {/* <Divider /> */}
+      </div>
+      {/* selected sources */}
+      {/* <div className="flex items-center gap-6 p-2 h-auto bg-secondary"> */}
+      {/* <MultipleSelector
+            key={options.length}
+            disabled={disabled}
+            defaultOptions={options}
+            onChange={(e) => setSelectedSpaces(e.map((x) => parseInt(x.value)))}
+            placeholder="Focus on specific spaces..."
+            emptyIndicator={
+              <p className="text-center text-lg leading-10 text-gray-600 dark:text-gray-400">
+                no results found.
+              </p>
+            }
+          /> */}
+      {/* </div> */}
+    </div>
+  );
+}
+
+export default QueryInput;