1 files changed, 25 insertions, 56 deletions

diff --git a/extension/src/SettingsEditor.tsx b/extension/src/SettingsEditor.tsx
index b10a705..7335a18 100644
--- a/extension/src/SettingsEditor.tsx
+++ b/extension/src/SettingsEditor.tsx
@@ -2,72 +2,41 @@ import RadioButtonGroup from "./RadioButtonGroup.tsx";
 import React, {useState} from "react";
 
 function SettingsEditor() {
-    const [selected, setSelected] = useState('0');
+    const [backgroundType, setBackgroundType] = useState("fromTheme");
+    const [sort, setSort] = useState("fromBookmarks");
+    const [rootFolder, setRootFolder] = useState('0');
 
     return (
         <form>
-            <RadioButtonGroup groupLabel="Background Type" defaultData={"fromTheme"} items={[
-                {label: "From Theme", data: "fromTheme"},
-                {label: "Solid Color", data: "solidColor"},
-                {label: "Image", data: "image"},
-            ]}/>
-            <RadioButtonGroup groupLabel="Sort" defaultData={"fromBookmarks"} items={[
-                {label: "From Bookmarks", data: "fromBookmarks"},
-                {label: "Alphabetical", data: "alphabetical"},
-                {label: "Frequency", data: "frequency"},
-                {label: "Recently used", data: "recent"},
-            ]}/>
+            <h3>Background Type</h3>
+            <RadioButtonGroup defaultValue={backgroundType} onChange={e => setBackgroundType(e)}>
+                <option value={"fromTheme"}>From Theme</option>
+                <option value={"solidColor"}>Solid Color</option>
+                <option value={"image"}>Image</option>
+            </RadioButtonGroup>
+
+            <h3>Sort</h3>
+            <RadioButtonGroup defaultValue={sort} onChange={e => setSort(e)}>
+                <option value={"fromBookmarks"}>From Bookmarks</option>
+                <option value={"alphabetical"}>Alphabetical</option>
+                <option value={"frequency"}>Frequency</option>
+                <option value={"recent"}>Recently used</option>
+            </RadioButtonGroup>
 
             <h3>Root folder</h3>
-            <select onChange={e => setSelected(e.target.value)}>
+            <select defaultValue={rootFolder} onChange={e => setRootFolder(e.target.value)}>
                 <option value={'0'}>Bookmarks Toolbar id:0</option>
                 <option value={'1'}>Mobile Bookmarks id:1</option>
                 <option value={'2'}>Other Bookmarks id:2</option>
             </select>
-            <span>currently selected: {selected}</span>
+
+            <br/>
+            <span>value of bg type: {backgroundType}</span>
+            <span>value of sort: {sort}</span>
+            <span>value of root folder: {rootFolder}</span>
+            <input type="submit"/>
         </form>
     )
 }
 
-export default SettingsEditor;
-
-// <div id="settings-menu">
-//     <h2>Settings</h2>
-//
-//     <h3>Sort</h3>
-//     <label>
-//         <input type="radio" name="sort"/>
-//         From bookmarks
-//     </label>
-//     <label>
-//         <input type="radio" name="sort"/>
-//         Alphabetical
-//     </label>
-//     <label>
-//         <input type="radio" name="sort"/>
-//         Frequency
-//     </label>
-//
-//     <h3>Background</h3>
-//     <label>
-//         <input type="radio" name="bg"/>
-//         From Theme
-//     </label>
-//     <label>
-//         <input type="radio" name="bg"/>
-//         Solid color
-//     </label>
-//     <label>
-//         <input type="radio" name="bg"/>
-//         Image
-//     </label>
-//
-//     <h3>Root folder</h3>
-//     <label>
-//         <select>
-//             <option>Bookmarks Toolbar id:0</option>
-//             <option>Mobile Bookmarks id:1</option>
-//             <option>Other Bookmarks id:2</option>
-//         </select>
-//     </label>
-// </div>
\ No newline at end of file
+export default SettingsEditor;
\ No newline at end of file