add import/export (#71)

2023-03-22 08:10:00 -06:00
parent 972a5aff23
commit f0c575b40d
6 changed files with 91 additions and 5 deletions
@@ -0,0 +1,34 @@
+import { Conversation } from "@/types";
+import { IconFileImport } from "@tabler/icons-react";
+import { FC } from "react";
+
+interface Props {
+  onImport: (conversations: Conversation[]) => void;
+}
+
+export const Import: FC<Props> = ({ onImport }) => {
+  return (
+    <div className="flex py-3 px-3 gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer w-full items-center">
+      <input
+        className="opacity-0 absolute w-[200px] cursor-pointer"
+        type="file"
+        accept=".json"
+        onChange={(e) => {
+          if (!e.target.files?.length) return;
+
+          const file = e.target.files[0];
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            const conversations: Conversation[] = JSON.parse(e.target?.result as string);
+            onImport(conversations);
+          };
+          reader.readAsText(file);
+        }}
+      />
+      <div className="flex items-center gap-3 text-left">
+        <IconFileImport size={16} />
+        <div>Import conversations</div>
+      </div>
+    </div>
+  );
+};