Added settings page and routing

src/index.css

@@ -378,16 +378,99 @@ table a{
 	text-decoration-color: var(--color-border);
 }
 
+/* SETTINGS PAGE*/
 
+#settings-container{
+	align-items: stretch;
+	display: grid;
+	grid-column-gap: 20px;
+	grid-row-gap: 1vh;
+	grid-template-columns: 25% 75%;
+	grid-template-rows: 8vh auto;
+	justify-items: stretch;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 2vh;
+	width: 75%;
+}
 
+#settings-nav{
+	align-items: stretch;
+	display: grid;
+	grid-column-gap: 20px;
+	grid-row-gap: 1vh;
+	grid-template-columns: 1fr;
+	grid-template-rows: 1fr 14fr 1fr;
+	justify-items: center;
+	margin-left: 0em;
+	margin-right: 0em;
+	height: 95vh;
+	background-color: var(--color-background);
+	border-radius: 1em;
+}
+#settings-nav div{
+	display: grid;
+}
+#nav_item{
+	line-height: 1.5rem;
+	margin: 0;
+	width: 100%;
+	text-align: center;
+}
+#nav_item h4{
+	color: var(--color-text-acc);
+}
 
+#nav_item a{
+	font-size: 1.25em;
+	display: block;
+	margin-left: 0px;
+	margin-right: 0px;
+	line-height: 2;
+	justify-self: center;
+}
+#nav_item a:hover{
+	text-decoration: none;
+	background-color: var(--color-search-background);
+}
 
+#settings-panel{
+	align-items: stretch;
+	display: grid;
+	grid-column-gap: 20px;
+	grid-row-gap: 1vh;
+	grid-template-columns: 1fr;
+	grid-template-rows: min-content;
+	justify-items: center;
+	margin-left: 0em;
+	margin-right: 0em;
+	height: 95vh;
+	background-color: var(--color-background);
+	border-radius: 1em;
+}
+#settings-panel-header{
+	display: grid;
+	text-align: center;
+}
 
-
-
-
-
-
+#personalForm {
+	display: grid;
+	grid-column-gap: 1vh;
+	grid-row-gap: 1vh;
+	grid-template-columns: min-content 95vh;
+	width: 100vh;
+	height: 1vh;
+	text-align: end;
+}
+#personalForm label {
+	width: min-content;
+}
+#personalForm input {
+	border: var(--color-border);
+}
+#personalForm input:focus {
+	border: var(--color-border);
+}
 
 
 

src/index.js

@@ -1,6 +1,9 @@
+import { render } from '@testing-library/react';
 import React from 'react';
 import { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { Outlet, Link } from "react-router-dom";
 import './index.css';
 
 const setValueFromLocalStorage = property => {
@@ -19,6 +22,12 @@ const setValue = (property, value) => {
   }
 };
 
+function App() {
+  return (
+    <Homepage />
+  );
+}
+
 function Homepage() {
   setTheme();
   
@@ -82,7 +91,7 @@ function Applications() {
     var NSFWEnabled = localStorage.getItem("contenttype");
     if (safe === "SAFE") {
       items.push(
-        <App
+        <Apps
           key={i}
           name={appList.apps[i].name}
           url={appList.apps[i].url}
@@ -92,7 +101,7 @@ function Applications() {
       );
     } else if (safe === "NSFW" && NSFWEnabled) {
       items.push(
-        <App
+        <Apps
           key={i}
           name={appList.apps[i].name}
           url={appList.apps[i].url}
@@ -115,7 +124,7 @@ function Applications() {
   );
 }
 
-function App(props) {
+function Apps(props) {
   
     let classNameType = props.NSFW + "-content";
     let hrefUrl = "https://" + props.url;
@@ -292,8 +301,101 @@ function ModalInit() {
   );
 }
 
+function Settings() {
+  setTheme();
+  return (
+    <main id="settings-container" className="fade">
+      <div id="settings-nav">
+        <h1>Settings</h1>
+        <nav id="nav_item">
+          <Link to="/settings/personalization">Personalization</Link>
+          <Link to="/settings/apps">Applications</Link>
+          <Link to="/settings/bookmarks">Bookmarks</Link>
+          <Link to="/settings/themes">Themes</Link>
+        </nav>
+        <nav id="nav_item">
+          <Link to="/">Back Home</Link>
+        </nav>
+      </div>
+      <Outlet />
+    </main>
+  );
+}
+
+function PersonalizationSettings() {
+  return (
+    <div id="settings-panel">
+      <div id="settings-panel-header">
+        <h1>Personalization</h1>
+        Personal details
+      </div>
+      <PersonalInfo />
+    </div>
+    
+  );
+}
+
+function PersonalInfo() {
+  var personalData = getPersonalData();
+  return (
+      <FormInput
+        name={personalData.name}
+        email={personalData.email}
+      />
+      
+  );
+}
+
+function FormInput(props) {
+  let name = props.name;
+  let email = props.email;
+  console.log(name);
+  return (
+    <div id="personalForm">
+      <label for="name">Name</label>
+      <input id="name" type="text" value={name}></input>
+      <label for="email">Email</label>
+      <input id="email" type="email" value={email}></input>
+    </div>
+  );
+}
+
+function AppSettings() {
+  return (
+    <div id="settings-panel">
+      <h1>Applications</h1>
+    </div>
+  );
+}
+
+function BookmarksSettings() {
+  return (
+    <div id="settings-panel">
+      <h1>Bookmarks</h1>
+    </div>
+  );
+}
+
+function ThemesSettings() {
+  return (
+    <div id="settings-panel">
+      <h1>Themes</h1>
+    </div>
+  );
+}
+
 ReactDOM.render(
-  <Homepage />,
+  <BrowserRouter>
+    <Routes>
+      <Route path="/" element={<App />} />
+      <Route path="/settings" element={<Settings />}>
+        <Route path="personalization" element={<PersonalizationSettings />}/>
+        <Route path="apps" element={<AppSettings />}/>
+        <Route path="bookmarks" element={<BookmarksSettings />}/>
+        <Route path="themes" element={<ThemesSettings />}/>
+      </Route>
+    </Routes>
+  </BrowserRouter>,
   document.getElementById('root')
 );
 
@@ -384,6 +486,10 @@ function getThemes() {
   let themes = require('./themes.json');
   return themes;
 }
+function getPersonalData() {
+  let themes = require('./personaldata.json');
+  return themes;
+}
 function updateTheme(e) {
   var themes = getThemes();
   var themeName = e.target.innerHTML.toLowerCase();