Merge pull request #2 from ATO-b2/drag-n-drop

Drag n drop

1 files changed, 55 insertions, 0 deletions

diff --git a/extension/src/components/BMEditor.tsx b/extension/src/components/BMEditor.tsx
new file mode 100644
index 0000000..1ac72c6
--- /dev/null
+++ b/extension/src/components/BMEditor.tsx
@@ -0,0 +1,55 @@
+import React, {useContext, useEffect, useState} from "react";
+import CloseIcon from "../assets/close.svg?react"
+import {ActiveEdit} from "./Body.tsx";
+import {getBrowser} from "../main.tsx";
+import RadioButtonGroup from "./RadioButtonGroup.tsx";
+
+
+function BMEditor() {
+    const [activeEdit, setActiveEdit] = useContext(ActiveEdit);
+
+    const [iconOptions, setIconOptions] = useState<string[]>([]);
+
+    useEffect(() => {
+        if (!activeEdit) return;
+        getBrowser().storage.local.get("icon-aval-"+activeEdit.id).then( r => {
+            setIconOptions(r["icon-aval-"+activeEdit.id]);
+        });
+    }, [activeEdit]);
+
+    if (!activeEdit) return;
+
+    let isFolder = activeEdit && activeEdit.children && activeEdit.children.length > 0;
+    return (
+        <div id="settings-menu" className={activeEdit ? "open" : "closed"}>
+            <button id="settings-close" onClick={_ => setActiveEdit(null)}>
+                <CloseIcon/>
+            </button>
+
+            <h1>Edit {isFolder ? "Folder" : "Bookmark"}</h1>
+
+            <h3>Name</h3>
+            <input type={"text"} defaultValue={activeEdit?.title} onChange={e => {
+                getBrowser().bookmarks.update(activeEdit!.id, {title: e.target.value})
+            }}/>
+
+            {!isFolder && (<>
+                <h3>URL</h3>
+                <input type={"url"} defaultValue={activeEdit?.url} onChange={e => {
+                    getBrowser().bookmarks.update(activeEdit!.id, {url: e.target.value})
+                }}/>
+            </>)}
+
+            <h3>Icon</h3>
+            {/*<RadioButtonGroup value={undefined}>*/}
+                {iconOptions && iconOptions.map(s =>
+                    // <option value={s}>
+                        <img src={s}/>
+                    // </option>
+                )}
+            {/*</RadioButtonGroup>*/}
+        </div>
+    );
+}
+
+export default BMEditor;
\ No newline at end of file