added settings UI

src/components/SettingsModal.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { StyledModal } from "./styled/SettingsModal.styled";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import Modal from "react-modal";
@@ -14,6 +14,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
   const selectedStyle = useGeneralStore(state => state.selectedStyle);
   const navigate = useNavigate();
   const location = useLocation();
+  const [expanded, setExpanded] = useState([]);
 
   const handleCloseModal = () => {
     closeModal();
@@ -25,6 +26,28 @@ const SettingsModal = ({ isOpen, closeModal }) => {
     }
   };
 
+  const toggleExpanded = (index) => {
+    setExpanded((prevExpanded) => {
+      const newExpanded = [...prevExpanded];
+      if (newExpanded.includes(index)) {
+        newExpanded.splice(newExpanded.indexOf(index), 1);
+      } else {
+        newExpanded.push(index);
+      }
+      return newExpanded;
+    });
+  };
+
+  const expandAll = () => {
+    if (expanded.length === 3) {
+      setExpanded([]);
+    } else {
+      setExpanded([0, 1, 2]);
+    }
+  };
+  
+  
+  
   return (
     <StyledModal
       isOpen={isOpen}
@@ -32,6 +55,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
       contentLabel="Settings"
       style={customOverlayStyles}
       selectedStyle={selectedStyle}
+      expanded={expanded}
     >
       <div className="panel">
         <div className="panel-header">
@@ -40,8 +64,80 @@ const SettingsModal = ({ isOpen, closeModal }) => {
             <span className="icon" title="close" />
           </Link>
         </div>
-        <h4>Plebbit Options</h4>
-        <p>Coming soon...</p>
+        <div className="all-div">
+          [
+          <button className="all-button" 
+          onClick={expandAll} style={{all: "unset", cursor: "pointer"}}>
+            {expanded.length === 3 ? "Collapse All Settings" : "Expand All Settings"}
+          </button>
+          ]
+        </div>
+        <ul>
+          <li className="settings-cat-lbl">
+          <span className={`${expanded.includes(0) ? 'minus' : 'plus'}`}
+            onClick={() => toggleExpanded(0)}
+          />
+          <span className="settings-pointer" style={{cursor: "pointer"}}
+            onClick={() => toggleExpanded(0)}
+          >Account</span>
+          </li>
+          <ul className="settings-cat" style={{ display: expanded.includes(0) ? 'block' : 'none' }}>
+            <li>
+            </li>
+          </ul>
+        </ul>
+        <ul>
+          <li className="settings-cat-lbl">
+          <span className={`${expanded.includes(1) ? 'minus' : 'plus'}`}
+            onClick={() => toggleExpanded(1)}
+          />
+          <span className="settings-pointer" style={{cursor: "pointer"}}
+            onClick={() => toggleExpanded(1)}
+          >Profile</span>
+          </li>
+          <ul className="settings-cat" style={{ display: expanded.includes(1) ? 'block' : 'none' }}>
+            <li>
+            </li>
+          </ul>
+        </ul>
+        <ul>
+          <li className="settings-cat-lbl">
+          <span className={`${expanded.includes(2) ? 'minus' : 'plus'}`}
+            onClick={() => toggleExpanded(2)}
+          />
+          <span className="settings-pointer" style={{cursor: "pointer"}}
+            onClick={() => toggleExpanded(2)}
+          >Plebbit Options</span>
+          </li>
+          <ul className="settings-cat" style={{ display: expanded.includes(2) ? 'block' : 'none' }}>
+            <li className="settings-option disc">
+              IPFS Gateway URL</li>
+            <li className="settings-tip">Optional URL of an IPFS gateway</li>
+            <div className="settings-input">
+              <input type="text" placeholder="IPFS Gateway URL" />
+            </div>
+          </ul>
+          <ul className="settings-cat" style={{ display: expanded.includes(2) ? 'block' : 'none' }}>
+            <li className="settings-option disc">
+              IPFS HTTP Client Options</li>
+            <li className="settings-tip">Optional URL of an IPFS API or IpfsHttpClientOptions, http://localhost:5001 to use a local IPFS node</li>
+            <div className="settings-input">
+              <input type="text" placeholder="IpfsHttpClientOptions" />
+            </div>
+          </ul>
+          <ul className="settings-cat" style={{ display: expanded.includes(2) ? 'block' : 'none' }}>
+            <li className="settings-option disc">
+              PubSub HTTP Client Options</li>
+            <li className="settings-tip">Optional URL or IpfsHttpClientOptions used for pubsub publishing when ipfsHttpClientOptions isn't available, like in the browser</li>
+            <div className="settings-input">
+              <input type="text" placeholder="pubsubHttpClientOptions" />
+            </div>
+          </ul>
+        </ul>
+        <div className="center">
+          <button className="save-button">Save</button>
+          <button className="reset-button">Reset</button>
+        </div>
       </div>
     </StyledModal>
   );