first iteration of settings menus complete
This commit is contained in:
Sean Edmunds
2
node_modules/.cache/.eslintcache
generated
vendored
2
node_modules/.cache/.eslintcache
generated
vendored
@@ -1 +1 @@
|
||||
[{"/home/seanedmunds/dev/home-page/src/index.js":"1"},{"size":22896,"mtime":1639695960041,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"fatalErrorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"ikqo75","/home/seanedmunds/dev/home-page/src/index.js",["6","7","8"],{"ruleId":"9","severity":1,"message":"10","line":1,"column":10,"nodeType":"11","messageId":"12","endLine":1,"endColumn":16},{"ruleId":"13","severity":1,"message":"14","line":195,"column":11,"nodeType":"15","endLine":195,"endColumn":61},{"ruleId":"16","severity":1,"message":"17","line":746,"column":1,"nodeType":"18","messageId":"19","endLine":749,"endColumn":2},"no-unused-vars","'render' is defined but never used.","Identifier","unusedVar","jsx-a11y/anchor-is-valid","The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md","JSXOpeningElement","no-extend-native","String prototype is read only, properties should not be added.","AssignmentExpression","unexpected"]
|
||||
[{"/home/seanedmunds/dev/home-page/src/index.js":"1"},{"size":27677,"mtime":1639779365084,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"fatalErrorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"ikqo75","/home/seanedmunds/dev/home-page/src/index.js",["6","7","8","9"],{"ruleId":"10","severity":1,"message":"11","line":1,"column":10,"nodeType":"12","messageId":"13","endLine":1,"endColumn":16},{"ruleId":"10","severity":1,"message":"14","line":167,"column":10,"nodeType":"12","messageId":"13","endLine":167,"endColumn":19},{"ruleId":"15","severity":1,"message":"16","line":184,"column":11,"nodeType":"17","endLine":184,"endColumn":61},{"ruleId":"18","severity":1,"message":"19","line":885,"column":1,"nodeType":"20","messageId":"21","endLine":888,"endColumn":2},"no-unused-vars","'render' is defined but never used.","Identifier","unusedVar","'ModalMenu' is defined but never used.","jsx-a11y/anchor-is-valid","The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md","JSXOpeningElement","no-extend-native","String prototype is read only, properties should not be added.","AssignmentExpression","unexpected"]
|
||||
147
src/index.css
147
src/index.css
@@ -175,6 +175,7 @@ a:hover #app-address{
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding: .3em;
|
||||
}
|
||||
.abackground > i{
|
||||
text-align: left;
|
||||
@@ -392,6 +393,7 @@ table a{
|
||||
margin-right: auto;
|
||||
margin-top: 2vh;
|
||||
width: 75%;
|
||||
padding-top: .3em;
|
||||
}
|
||||
|
||||
#settings-nav{
|
||||
@@ -405,7 +407,7 @@ table a{
|
||||
margin-left: 0em;
|
||||
margin-right: 0em;
|
||||
height: 95vh;
|
||||
background-color: var(--color-background);
|
||||
background-color: var(--color-search-background);
|
||||
border-radius: 1em;
|
||||
}
|
||||
#settings-nav div{
|
||||
@@ -445,7 +447,7 @@ table a{
|
||||
margin-left: 0em;
|
||||
margin-right: 0em;
|
||||
height: 95vh;
|
||||
background-color: var(--color-background);
|
||||
background-color: var(--color-search-background);
|
||||
border-radius: 1em;
|
||||
overflow: auto;
|
||||
}
|
||||
@@ -460,6 +462,19 @@ table a{
|
||||
display: grid;
|
||||
text-align: center;
|
||||
}
|
||||
#settings-panel button:not(.theme-button) {
|
||||
color: var(--color-text-pri);
|
||||
margin: 1em;
|
||||
padding-top: .5em;
|
||||
padding-bottom: .5em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
border: 0px none;
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
#settings-panel button:hover:not(.theme-button) {
|
||||
background-color: var(--color-search-background);
|
||||
}
|
||||
|
||||
/* Personalization Form */
|
||||
|
||||
@@ -502,7 +517,6 @@ table a{
|
||||
#messageForm input {
|
||||
border: var(--color-border);
|
||||
padding-left: 1em;
|
||||
height: 1hv;
|
||||
}
|
||||
#messageForm input:focus {
|
||||
border: var(--color-border);
|
||||
@@ -513,6 +527,87 @@ table a{
|
||||
grid-row-gap: 1vh;
|
||||
}
|
||||
|
||||
/* Application Form */
|
||||
|
||||
#applicationForm {
|
||||
display: grid;
|
||||
grid-column-gap: 1vh;
|
||||
grid-row-gap: 1vh;
|
||||
grid-template-columns: 1fr;
|
||||
width: 100vh;
|
||||
text-align: end;
|
||||
}
|
||||
#applicationForm label {
|
||||
width: 100%;
|
||||
padding-right: 1em;
|
||||
}
|
||||
#applicationForm input {
|
||||
border: var(--color-border);
|
||||
padding-left: 1em;
|
||||
}
|
||||
#applicationForm input:focus {
|
||||
border: var(--color-border);
|
||||
}
|
||||
#applicationGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 5% 10% 5% 30% 5% 10% 10% 10% 5% 5%;
|
||||
grid-row-gap: 1vh;
|
||||
}
|
||||
|
||||
/* Bookmark Form */
|
||||
|
||||
#bookmarkForm {
|
||||
display: grid;
|
||||
grid-column-gap: 1vh;
|
||||
grid-row-gap: 1vh;
|
||||
grid-template-columns: 1fr;
|
||||
width: 100vh;
|
||||
text-align: end;
|
||||
}
|
||||
#bookmarkForm label {
|
||||
width: 100%;
|
||||
padding-right: 1em;
|
||||
}
|
||||
#bookmarkForm input {
|
||||
border: var(--color-border);
|
||||
padding-left: 1em;
|
||||
}
|
||||
#bookmarkForm input:focus {
|
||||
border: var(--color-border);
|
||||
}
|
||||
#bookmarkGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 5% 25% 10% 60%;
|
||||
grid-row-gap: 1vh;
|
||||
}
|
||||
|
||||
/* Providers Form */
|
||||
|
||||
#providersForm {
|
||||
display: grid;
|
||||
grid-column-gap: 1vh;
|
||||
grid-row-gap: 1vh;
|
||||
grid-template-columns: 1fr;
|
||||
width: 100vh;
|
||||
text-align: end;
|
||||
}
|
||||
#providersForm label {
|
||||
width: 100%;
|
||||
padding-right: 1em;
|
||||
}
|
||||
#providersForm input {
|
||||
border: var(--color-border);
|
||||
padding-left: 1em;
|
||||
}
|
||||
#providersForm input:focus {
|
||||
border: var(--color-border);
|
||||
}
|
||||
#providersGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 5% 10% 5% 10% 5% 65%;
|
||||
grid-row-gap: 1vh;
|
||||
}
|
||||
|
||||
|
||||
/* MODAL */
|
||||
|
||||
@@ -538,17 +633,15 @@ table a{
|
||||
#modal>div{
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text-acc);
|
||||
box-shadow: 0 14px 28px var(--color-search-background), 0 15px 12px rgba(0, 0, 0, .35);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 2em;
|
||||
margin-top: 5vh;
|
||||
margin-bottom: 5vh;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
display: grid;
|
||||
flex-direction: column;
|
||||
border-radius: 1em;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
#modal h1{
|
||||
@@ -568,7 +661,7 @@ table a{
|
||||
#modal-footer{
|
||||
display:flex;
|
||||
font-size:2em;
|
||||
justify-content: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#modal-footer a{
|
||||
@@ -585,11 +678,10 @@ table a{
|
||||
}
|
||||
|
||||
#modal-footer input[type="checkbox"]:checked + label{
|
||||
color: var(--color-text-alt);
|
||||
color: var(--color-text-acc);
|
||||
}
|
||||
|
||||
.sneaky{
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
}
|
||||
|
||||
@@ -617,9 +709,10 @@ table a{
|
||||
|
||||
#modal-theme{
|
||||
border-bottom: 0px solid var(--color-text-acc);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2em;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
grid-column-gap: 2em;
|
||||
grid-row-gap: 0em;
|
||||
}
|
||||
|
||||
#providers{
|
||||
@@ -631,12 +724,30 @@ table a{
|
||||
/* THEMING */
|
||||
|
||||
.theme-button{
|
||||
font-size: 0.8em;
|
||||
margin: 2px;
|
||||
font-size: 1em;
|
||||
font-weight:500;
|
||||
margin: 20px;
|
||||
width:128px;
|
||||
line-height: 3em;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.theme-row{
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.theme-palette {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.swatch{
|
||||
height: 30%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.theme-blackboard{
|
||||
@@ -675,6 +786,12 @@ table a{
|
||||
color: #aeea00;
|
||||
}
|
||||
|
||||
.theme-white{
|
||||
background-color: #ffffff;
|
||||
border: 4px solid #222222;
|
||||
color: #dddddd;
|
||||
}
|
||||
|
||||
.theme-passion{
|
||||
background-color: #f5f5f5;
|
||||
border: 4px solid #8e24aa;
|
||||
@@ -709,7 +826,7 @@ table a{
|
||||
border: 4px solid #F3E600;
|
||||
color: #FF2A6D;
|
||||
}
|
||||
.theme-cyberpunk{
|
||||
.theme-quadra{
|
||||
background-color: #010115;
|
||||
border: 4px solid #F3E600;
|
||||
color: #FF2A6D;
|
||||
|
||||
251
src/index.js
251
src/index.js
@@ -36,9 +36,6 @@ function Homepage() {
|
||||
<div>
|
||||
<Search />
|
||||
</div>
|
||||
<div>
|
||||
<ModalMenu />
|
||||
</div>
|
||||
<div>
|
||||
<Header
|
||||
date={date()}
|
||||
@@ -52,7 +49,7 @@ function Homepage() {
|
||||
<Bookmarks />
|
||||
</div>
|
||||
<div>
|
||||
<ModalInit />
|
||||
<SettingsButton />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
@@ -84,7 +81,7 @@ function Header(props) {
|
||||
}
|
||||
|
||||
const Applications = () => {
|
||||
const data = (getApps()).apps;
|
||||
let data = (getApps()).apps;
|
||||
return (
|
||||
<section id="apps">
|
||||
<h3>Applications</h3>
|
||||
@@ -104,7 +101,6 @@ const Applications = () => {
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function Apps(props) {
|
||||
|
||||
let classNameType = props.NSFW + "-content";
|
||||
@@ -128,41 +124,34 @@ function Apps(props) {
|
||||
}
|
||||
|
||||
function Bookmarks() {
|
||||
let bookmarkList = getLinks();
|
||||
var items = [];
|
||||
for (var i = 0; i < bookmarkList.bookmarks.length; i++) {
|
||||
items.push(
|
||||
<LinkGroups
|
||||
key={i}
|
||||
category={bookmarkList.bookmarks[i].category}
|
||||
links={bookmarkList.bookmarks[i].links}
|
||||
/>
|
||||
);
|
||||
}
|
||||
let bookmarkList = (getLinks()).bookmarks;
|
||||
return (
|
||||
<section id="links">
|
||||
<h3>Bookmarks</h3>
|
||||
<div id="links_loop">
|
||||
{items}
|
||||
{bookmarkList.map((bookmarkList) => (
|
||||
<LinkGroups
|
||||
key={bookmarkList.category}
|
||||
category={bookmarkList.category}
|
||||
links={bookmarkList.links}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function LinkGroups(props) {
|
||||
var items = [];
|
||||
for (var i = 0; i < props.links.length; i++) {
|
||||
items.push(
|
||||
<LinkItem
|
||||
key={i}
|
||||
link={props.links[i]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
let links = props.links;
|
||||
return (
|
||||
<div id="links_item">
|
||||
<h4>{props.category}</h4>
|
||||
{items}
|
||||
<h4>{props.category}</h4>
|
||||
{links.map((links, index) => (
|
||||
<LinkItem
|
||||
key={index}
|
||||
link={links}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -212,7 +201,7 @@ function ModalMenu() {
|
||||
<button data-theme="tron" className="theme-button theme-tron" onClick={updateTheme}>Tron</button>
|
||||
<button data-theme="paper" className="theme-button theme-paper" onClick={updateTheme}>Paper</button>
|
||||
<button data-theme="cyberpunk" className="theme-button theme-cyberpunk" onClick={updateTheme}>Cyberpunk</button>
|
||||
<button data-theme="quadra" className="theme-button theme-panam" onClick={updateTheme}>Quadra</button>
|
||||
<button data-theme="quadra" className="theme-button theme-quadra" onClick={updateTheme}>Quadra</button>
|
||||
<button data-theme="panam" className="theme-button theme-panam" onClick={updateTheme}>Panam</button>
|
||||
<button data-theme="touch" className="theme-button theme-touch" onClick={updateTheme}>Touch</button>
|
||||
<button data-theme="peek" className="theme-button theme-peek" onClick={updateTheme}>Peek</button>
|
||||
@@ -267,19 +256,20 @@ function Provider(props) {
|
||||
);
|
||||
}
|
||||
|
||||
function ModalInit() {
|
||||
function SettingsButton() {
|
||||
setDisplayedItems();
|
||||
return (
|
||||
<div id="modal_init">
|
||||
<a className="btn" href="#modal">
|
||||
<Link to="/settings">
|
||||
<span className="iconify icon" data-icon="mdi-xbox-controller-menu"></span>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Settings() {
|
||||
setTheme();
|
||||
var isChecked = localStorage.getItem("contenttype");
|
||||
return (
|
||||
<main id="settings-container" className="fade">
|
||||
<div id="settings-nav">
|
||||
@@ -289,8 +279,14 @@ function Settings() {
|
||||
<Link to="/settings/apps">Applications</Link>
|
||||
<Link to="/settings/bookmarks">Bookmarks</Link>
|
||||
<Link to="/settings/themes">Themes</Link>
|
||||
<Link to="/settings/providers">Search Providers</Link>
|
||||
</nav>
|
||||
<nav id="nav_item">
|
||||
<header id="modal-footer">
|
||||
<HideButton
|
||||
checked = {isChecked}
|
||||
/>
|
||||
</header>
|
||||
<Link to="/">Back Home</Link>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -305,11 +301,11 @@ const PersonalizationSettings = () => {
|
||||
};
|
||||
return (
|
||||
<div id="settings-panel">
|
||||
<form id="personalizationForm">
|
||||
<div id="settings-panel-header">
|
||||
<div id="settings-panel-header">
|
||||
<h1>Personalization</h1>
|
||||
<h3>Personal details</h3>
|
||||
</div>
|
||||
</div>
|
||||
<form id="personalizationForm">
|
||||
<PersonalInfo />
|
||||
<div>
|
||||
<h3>Greetings</h3>
|
||||
@@ -350,24 +346,19 @@ function FormInput(props) {
|
||||
}
|
||||
|
||||
function MessageInfo() {
|
||||
let greetings = require('./messages.json');
|
||||
var items = [];
|
||||
for (var i = 0; i < greetings.messages.length; i++) {
|
||||
items.push(
|
||||
<Messages
|
||||
key={i}
|
||||
group={i+1}
|
||||
index={greetings.messages[i].index}
|
||||
greeting={greetings.messages[i].message}
|
||||
easterEgg={greetings.messages[i].easteregg}
|
||||
/>
|
||||
);
|
||||
}
|
||||
let greetings = (require('./messages.json')).messages;
|
||||
return (
|
||||
<div id="messageForm">
|
||||
{items}
|
||||
{greetings.map((greetings, index) => (
|
||||
<Messages
|
||||
key={index}
|
||||
group={index+1}
|
||||
index={greetings.index}
|
||||
greeting={greetings.message}
|
||||
easterEgg={greetings.easteregg}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
@@ -393,26 +384,173 @@ function Messages(props) {
|
||||
);
|
||||
}
|
||||
|
||||
function AppSettings() {
|
||||
const ApplicationSettings = () => {
|
||||
let apps = (getApps()).apps
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
};
|
||||
return (
|
||||
<div id="settings-panel">
|
||||
<h1>Applications</h1>
|
||||
<div id="settings-panel-header">
|
||||
<h1>Applications</h1>
|
||||
</div>
|
||||
<form id="applicationForm">
|
||||
{apps.map((apps) => (
|
||||
<ApplicationDetails
|
||||
key={apps.name}
|
||||
name={apps.name}
|
||||
url={apps.url}
|
||||
icon={apps.icon}
|
||||
urlbase={apps.urlbase}
|
||||
NSFW={apps.NSFW}
|
||||
/>
|
||||
))}
|
||||
</form>
|
||||
<button onClick={handleSubmit} type="submit" form="applicationForm" value="submit">Save</button>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
function ApplicationDetails(props) {
|
||||
|
||||
var nsfwChecked;
|
||||
if(props.NSFW === "NSFW") {
|
||||
nsfwChecked = true;
|
||||
} else if(props.easterEgg === "SAFE") {
|
||||
nsfwChecked = false;
|
||||
} else {
|
||||
nsfwChecked = false;
|
||||
}
|
||||
return (
|
||||
<div id="applicationGrid" title={props.name}>
|
||||
<label htmlFor="name">Name</label>
|
||||
<input id="name" type="text" defaultValue={props.name}></input>
|
||||
<label htmlFor="url">URL</label>
|
||||
<input id="url" type="text" defaultValue={props.url}></input>
|
||||
<label htmlFor="icon">Icon</label>
|
||||
<input id="icon" type="text" defaultValue={props.icon}></input>
|
||||
<label htmlFor="baseurl">Base URL</label>
|
||||
<input id="baseurl" type="text" defaultValue={props.urlbase}></input>
|
||||
<label htmlFor="NSFW">NSFW</label>
|
||||
<input id="NSFW" type="checkbox" defaultChecked={nsfwChecked}></input>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BookmarksSettings() {
|
||||
const BookmarksSettings = () => {
|
||||
let groups = (getLinks()).bookmarks;
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
};
|
||||
return (
|
||||
<div id="settings-panel">
|
||||
<h1>Bookmarks</h1>
|
||||
<div id="settings-panel-header">
|
||||
<h1>Bookmarks</h1>
|
||||
</div>
|
||||
<form id="bookmarkForm">
|
||||
<div>
|
||||
{groups.map((groups) => (
|
||||
<BookmarkGroups
|
||||
key={groups.category}
|
||||
category={groups.category}
|
||||
links={groups.links}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</form>
|
||||
<button onClick={handleSubmit} type="submit" form="bookmarkForm" value="submit">Save</button>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
function BookmarkGroups(props) {
|
||||
let links = props.links;
|
||||
return (
|
||||
<div id="bookmarkForm">
|
||||
<h3>{props.category}</h3>
|
||||
{links.map((links) => (
|
||||
<BookmarkDetails
|
||||
key={links.name}
|
||||
name={links.name}
|
||||
url={links.url}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BookmarkDetails(props) {
|
||||
return (
|
||||
<div id="bookmarkGrid" title={props.name}>
|
||||
<label htmlFor="name">Name</label>
|
||||
<input id="name" type="text" defaultValue={props.name}></input>
|
||||
<label htmlFor="url">URL</label>
|
||||
<input id="url" type="text" defaultValue={props.url}></input>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ThemesSettings() {
|
||||
let themes = (getThemes()).themes;
|
||||
console.log(themes[0].colorbackground);
|
||||
return (
|
||||
<div id="settings-panel">
|
||||
<h1>Themes</h1>
|
||||
<div id="modal-theme">
|
||||
{themes.map((themes) => (
|
||||
<div className="theme-row">
|
||||
<button data-theme={themes.name} className={"theme-button theme-" + themes.name} onClick={updateTheme}>{themes.name}</button>
|
||||
<div className="theme-palette">
|
||||
<div className="swatch" style={{background: themes.colorbackground}}></div>
|
||||
<div className="swatch" style={{background: themes.colorserachbackground}}></div>
|
||||
<div className="swatch" style={{background: themes.colortextpri}}></div>
|
||||
<div className="swatch" style={{background: themes.colortextacc}}></div>
|
||||
<div className="swatch" style={{background: themes.colorborder}}></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ProviderSettings() {
|
||||
let providers = (getProviders()).providers;
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
};
|
||||
return (
|
||||
<div id="settings-panel">
|
||||
<div id="settings-panel-header">
|
||||
<h1>Providers</h1>
|
||||
</div>
|
||||
<form id="providersForm">
|
||||
{providers.map((providers) => (
|
||||
<ProvidersDetails
|
||||
key={providers.name}
|
||||
name={providers.name}
|
||||
url={providers.url}
|
||||
prefix={providers.prefix}
|
||||
/>
|
||||
))}
|
||||
</form>
|
||||
<button onClick={handleSubmit} type="submit" form="providersForm" value="submit">Save</button>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
function ProvidersDetails(props) {
|
||||
return (
|
||||
<div id="providersGrid" title={props.name}>
|
||||
<label htmlFor="name">Name</label>
|
||||
<input id="name" type="text" defaultValue={props.name}></input>
|
||||
<label htmlFor="prefix">Prefix</label>
|
||||
<input id="prefix" type="text" defaultValue={props.prefix}></input>
|
||||
<label htmlFor="url">URL</label>
|
||||
<input id="url" type="text" defaultValue={props.url}></input>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -423,9 +561,10 @@ ReactDOM.render(
|
||||
<Route path="/" element={<App />} />
|
||||
<Route path="/settings" element={<Settings />}>
|
||||
<Route path="personalization" element={<PersonalizationSettings />}/>
|
||||
<Route path="apps" element={<AppSettings />}/>
|
||||
<Route path="apps" element={<ApplicationSettings />}/>
|
||||
<Route path="bookmarks" element={<BookmarksSettings />}/>
|
||||
<Route path="themes" element={<ThemesSettings />}/>
|
||||
<Route path="providers" element={<ProviderSettings />}/>
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>,
|
||||
|
||||
Reference in New Issue
Block a user