added files/folders from new structure

src/components/AppItem.js

@@ -0,0 +1,23 @@
+function AppItem(props) {
+  
+    let classNameType = props.NSFW + "-content";
+    let hrefUrl = "https://" + props.url;
+    let iconName = "mdi-" + props.icon;
+    return (
+      <div className={classNameType}>
+        <a href={hrefUrl}>
+          <div className="apps_item">
+            <div className="apps_icon">
+              <span className="iconify icon" data-icon={iconName}></span>
+            </div>
+            <div className="apps_text">
+              <span id="app-name">{props.name}</span>
+              <span id="app-address">{props.url}</span>
+            </div>
+          </div>
+        </a>
+      </div>
+    );
+}
+
+export default AppItem;

src/components/ApplicationDetails.js

@@ -0,0 +1,27 @@
+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>
+  );
+}
+
+export default ApplicationDetails;

src/components/ApplicationSettings.js

@@ -0,0 +1,33 @@
+import { getApps } from '../assets/functions.js';
+import ApplicationDetails from './ApplicationDetails'
+
+const ApplicationSettings = () => {
+    let apps = (getApps()).apps;
+    console.log(apps);
+    const handleSubmit = (e) => {
+      e.preventDefault();
+    };
+    return (
+      <div id="settings-panel">
+        <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>
+      
+    );
+}
+
+export default ApplicationSettings;

src/components/Applications.js

@@ -0,0 +1,25 @@
+import AppItem from './AppItem';
+import { getApps } from '../assets/functions';
+
+const Applications = () => {
+  let data = (getApps()).apps;
+  return (
+    <section id="apps">
+      <h3>Applications</h3>
+      <div id="apps_loop">
+      {data.map((data) => (
+        <AppItem
+          key={data.name}
+          name={data.name}
+          url={data.url}
+          icon={data.icon}
+          NSFW={data.NSFW}
+        />
+      ))}
+      </div>
+    </section>
+
+  );
+}
+
+export default Applications;

src/components/BookmarkDetails.js

@@ -0,0 +1,12 @@
+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>
+    );
+}
+
+export default BookmarkDetails;

src/components/BookmarkGroups.js

@@ -0,0 +1,19 @@
+import BookmarkDetails from './BookmarkDetails';
+
+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>
+    );
+}
+
+export default BookmarkGroups;

src/components/BookmarkSettings.js

@@ -0,0 +1,31 @@
+import BookmarkGroups from './BookmarkGroups';
+import { getLinks } from '../assets/functions';
+
+const BookmarksSettings = () => {
+    let groups = (getLinks()).bookmarks;
+    const handleSubmit = (e) => {
+      e.preventDefault();
+    };
+    return (
+      <div id="settings-panel">
+        <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>
+      
+    );
+}
+
+export default BookmarksSettings;

src/components/Bookmarks.js

@@ -0,0 +1,22 @@
+import LinkGroups from './LinkGroups';
+import { getLinks } from '../assets/functions';
+
+function Links() {
+    let bookmarkList = (getLinks()).bookmarks;
+    return (
+      <section id="links">
+        <h3>Bookmarks</h3>
+        <div id="links_loop">
+          {bookmarkList.map((bookmarkList) => (
+            <LinkGroups
+              key={bookmarkList.category}
+              category={bookmarkList.category}
+              links={bookmarkList.links}
+            />
+          ))}
+        </div>
+      </section>
+    );
+  }
+
+export default Links;

src/components/Header.js

@@ -0,0 +1,46 @@
+import { useState, useEffect } from 'react';
+import { fixDigits } from "../assets/functions";
+
+function Header(props) {
+    return (
+      <section id="header">
+        <div id="greeting_block">
+          <h1 id="header_greet">{props.greet}</h1>
+        </div>
+        <div id="date_block">
+          <h2 id="header_date">{props.date}</h2>
+          <Clock />
+        </div>
+      </section>
+    );
+}
+
+export default Header;
+
+function Clock() {
+  const [date, setDate] = useState(new Date());
+
+  function refreshClock() {
+    setDate(new Date());
+  }
+  useEffect(() => {
+    const timerId = setInterval(refreshClock, 1000);
+    return function cleanup() {
+      clearInterval(timerId);
+    };
+  }, []);
+
+  var hour = date.getHours();
+  var minutes = date.getMinutes();
+  //var seconds = date.getSeconds();
+  var midday = "AM";
+  midday = (hour >= 12) ? "PM" : "AM";
+  hour = (hour === 0) ? 12 : ((hour > 12) ? (hour - 12) : hour);
+  minutes = fixDigits(minutes);
+  //seconds = fixDigits(seconds);
+  let time = hour + ":" + minutes + " " + midday;
+
+  return (
+    <h2 id="clock">{time}</h2>
+  );
+}

src/components/HideButton.js

@@ -0,0 +1,49 @@
+function HideButton(props) {
+    if(props.checked === "true") {
+      return (
+        <div className="sneaky"><input type="checkbox" id="contenttype" onChange={udpateDisplayedItems} defaultChecked={true}></input>
+        <label htmlFor="contenttype"><span className="iconify" data-icon="mdi-domino-mask"></span></label></div>
+      );
+    } else {
+      return (
+        <div className="sneaky"><input type="checkbox" id="contenttype" onChange={udpateDisplayedItems} defaultChecked={false}></input>
+        <label htmlFor="contenttype"><span className="iconify" data-icon="mdi-domino-mask"></span></label></div>
+      );
+    }
+}
+
+export default HideButton;
+
+function udpateDisplayedItems(e) {
+  localStorage.setItem('contenttype', e.target.checked);
+  if (e.target.checked) {
+    localStorage.setItem('content-display', 'none');
+  } else {
+    localStorage.setItem('content-display', 'block');
+  }
+  setDisplayedItems();
+}
+function setDisplayedItems() {
+  if(localStorage.getItem("contenttype") === null) {
+      localStorage.setItem('contenttype', false);
+      localStorage.setItem('content-display', "block");
+  }
+  setValueFromLocalStorage('contenttype');
+  setValueFromLocalStorage('content-display');
+}
+
+export const setValueFromLocalStorage = property => {
+  let value = localStorage.getItem(property);
+  setValue(property, value);
+};
+export const setValue = (property, value) => {
+  if (value) {
+      document.documentElement.style.setProperty(`--${property}`, value);
+
+      const input = document.querySelector(`#${property}`);
+      if (input) {
+          value = value.replace('px', '');
+          input.value = value;
+      }
+  }
+};

src/components/LinkGroups.js

@@ -0,0 +1,18 @@
+import LinkItem from './LinkItem'
+
+function LinkGroups(props) {
+    let links = props.links;
+    return (
+      <div id="links_item">
+      <h4>{props.category}</h4>
+        {links.map((links, index) => (
+          <LinkItem
+            key={index}
+            link={links}
+          />
+        ))}
+      </div>
+    );
+}
+
+export default LinkGroups;

src/components/LinkItem.js

@@ -0,0 +1,9 @@
+function LinkItem(props) {
+    return (
+      <div>
+        <a href={props.link.url} className="theme_color-border theme_text-select">{props.link.name}</a>
+      </div>
+    );
+}
+
+export default LinkItem;

src/components/MessageInfo.js

@@ -0,0 +1,21 @@
+import Messages from './Messages';
+
+function MessageInfo() {
+    let greetings = (require('../messages.json')).messages;
+    console.log(greetings);
+    return (
+      <div id="messageForm">
+        {greetings.map((greetings, index) => (
+            <Messages
+              key={index}
+              group={index+1}
+              index={greetings.index}
+              greeting={greetings.message}
+              easterEgg={greetings.easteregg}
+            />
+        ))}
+      </div>
+    );
+}
+
+export default MessageInfo

src/components/Messages.js

@@ -0,0 +1,23 @@
+function Messages(props) {
+
+    var eeChecked;
+    if(props.easterEgg === "TRUE") {
+      eeChecked = true;
+    } else if(props.easterEgg === "FALSE") {
+      eeChecked = false;
+    } else {
+      eeChecked = false;
+    }
+    return (
+      <div id="messageGrid" title={props.group}>
+        <label htmlFor="index">Index</label>
+        <input id="index" type="text" defaultValue={props.index}></input>
+        <label htmlFor="greeting">Greeting</label>
+        <input id="greeting" type="text" defaultValue={props.greeting}></input>
+        <label htmlFor="Easter Egg">Easter Egg</label>
+        <input id="Easter Egg" type="checkbox" defaultChecked={eeChecked}></input>
+      </div>
+    );
+}
+
+export default Messages;

src/components/PersonalFormInput.js

@@ -0,0 +1,17 @@
+function PersonalFromInput(props) {
+    let fname = props.fname;
+    let lname = props.lname;
+    let email = props.email;
+    return (
+      <div id="personalForm">
+        <label htmlFor="fname">First Name</label>
+        <input id="fname" type="text" defaultValue={fname} onChange={() => console.log()}></input>
+        <label htmlFor="lname">Last Name</label>
+        <input id="lname" type="text" defaultValue={lname} onChange={() => console.log()}></input>
+        <label htmlFor="email">Email</label>
+        <input id="email" type="email" defaultValue={email} onChange={() => console.log()}></input>
+      </div>
+    );
+  }
+
+export default PersonalFromInput;

src/components/PersonalInfo.js

@@ -0,0 +1,15 @@
+import PersonalFormInput from './PersonalFormInput';
+import { getPersonalData } from '../assets/functions';
+
+function PersonalInfo() {
+    var personalData = getPersonalData();
+    return (
+        <PersonalFormInput
+          fname={personalData.fname}
+          lname={personalData.lname}
+          email={personalData.email}
+        />
+    );
+}
+
+export default PersonalInfo;

src/components/PersonalizationSettings.js

@@ -0,0 +1,27 @@
+import PersonalInfo from './PersonalInfo';
+import MessageInfo from './MessageInfo';
+
+const PersonalizationSettings = () => {
+    const handleSubmit = (e) => {
+      e.preventDefault();
+    };
+    return (
+      <div id="settings-panel">
+        <div id="settings-panel-header">
+            <h1>Personalization</h1>
+            <h3>Personal details</h3>
+        </div>
+        <form id="personalizationForm">
+          <PersonalInfo />
+          <div>
+            <h3>Greetings</h3>
+          </div>
+          <MessageInfo />
+        </form>
+        <button onClick={handleSubmit} type="submit" form="personalizationForm" value="submit">Save</button>
+      </div>
+      
+    );
+};
+
+export default PersonalizationSettings;

src/components/Provider.js

@@ -0,0 +1,10 @@
+function Provider(props) {
+    return (
+      <tr>
+        <td><a href={props.provider.url}>{props.provider.name}</a></td>
+        <td>{props.provider.prefix}</td>
+      </tr>
+    );
+}
+
+export default Provider;

src/components/ProviderDetails.js

@@ -0,0 +1,14 @@
+function ProviderDetails(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>
+    );
+}
+
+export default ProviderDetails;

src/components/ProviderSettings.js

@@ -0,0 +1,30 @@
+import ProviderDetails from './ProviderDetails';
+import { getProviders } from '../assets/functions';
+
+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) => (
+            <ProviderDetails
+              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>
+      
+    );
+}
+
+export default ProviderSettings;

src/components/Search.js

@@ -0,0 +1,13 @@
+import { handleKeyPress } from "../assets/functions";
+
+export default function Search() {
+    return (
+      <section id="search">
+        <div className="abackground">
+          <input name="keywords" type="text" className="keyword" id="keywords" size="50" spellCheck="true" placeholder="" autoComplete="off" autoFocus={true} onKeyUp={handleKeyPress}/>
+          <label id="searchType" className="Input-label">Google search</label>
+        </div>
+      </section>
+    )
+}
+// export default Search;

src/components/SettingsButton.js

@@ -0,0 +1,15 @@
+import { Link } from "react-router-dom";
+import setDisplayedItems from '../assets/functions'
+
+function SettingsButton() {
+    setDisplayedItems();
+    return (
+      <div id="modal_init">
+        <Link to="/sui/settings">
+          <span className="iconify icon" data-icon="mdi-xbox-controller-menu"></span>
+        </Link>
+      </div>
+    );
+}
+
+export default SettingsButton;

src/components/ThemesSettings.js

@@ -0,0 +1,27 @@
+import { getThemes, updateTheme } from "../assets/functions";
+
+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>
+    );
+}
+
+export default ThemesSettings;