1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
import RadioButtonGroup from "./RadioButtonGroup.tsx";
import React, {useState} from "react";
function SettingsEditor() {
const [selected, setSelected] = 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>Root folder</h3>
<select onChange={e => setSelected(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>
</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>
|
