dropdown

package-lock.json

@@ -7,6 +7,8 @@
       "dependencies": {
         "@titaniumnetwork-dev/ultraviolet": "^2.0.0",
         "@tomphttp/bare-server-node": "^2.0.1",
+        "classnames": "^2.3.2",
+        "framer-motion": "^10.16.16",
         "i18next": "^23.7.9",
         "i18next-browser-languagedetector": "^7.2.0",
         "million": "^2.6.4",
@@ -479,6 +481,21 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.19.9",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.9.tgz",
@@ -2034,6 +2051,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/cliui": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -3111,6 +3133,34 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "10.16.16",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.16.tgz",
+      "integrity": "sha512-je6j91rd7NmUX7L1XHouwJ4v3R+SO4umso2LUcgOct3rHZ0PajZ80ETYZTajzEXEl9DlKyzjyt4AvGQ+lrebOw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/framer-motion/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
     "node_modules/fs-extra": {
       "version": "11.2.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",

src/components/Header.tsx

@@ -30,7 +30,7 @@ export function Header() {
       </Link>
       <button
         type="button"
-        className="z-10 md:hidden"
+        className="z-20 md:hidden"
         aria-expanded={isActive}
         aria-controls="navbar-default"
         onClick={() => setIsActive(!isActive)}
@@ -38,7 +38,7 @@ export function Header() {
         <RxHamburgerMenu />
       </button>
       <div
-        className={`z-5 fixed inset-0 flex md:relative md:right-0 ${
+        className={`fixed inset-0 z-10 flex md:relative md:right-0 ${
           window.innerWidth <= 768 && !isActive && "hidden"
         }`}
       >

src/pages/Settings/Dropdown.tsx

@@ -0,0 +1,40 @@
+import { useState } from "preact/hooks";
+
+const Dropdown = ({ name, options }: { name: string; options: string[] }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [choice, setChoice] = useState(
+    localStorage.getItem(name) || options[0]
+  );
+
+  return (
+    <div className="relative text-center">
+      <h1>{name}</h1>
+      <div
+        className="font-roboto flex h-14 w-56 cursor-pointer flex-col items-center justify-center rounded-2xl border border-input-border-color bg-input text-center text-xl"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <div className="select-none">{choice}</div>
+        {isOpen && (
+          <div className="absolute top-full w-full border">
+            {options.map((option: string) => (
+              <div
+                key={option}
+                className="hover:bg-dropdown-option-hover-color"
+                onClick={() => {
+                  setIsOpen(false);
+                  setChoice(option);
+                  localStorage.setItem(name, option);
+                }}
+              >
+                {option}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Dropdown;
+

src/pages/Settings/Proxy.tsx

@@ -1,19 +1,27 @@
 import { motion } from "framer-motion";
 import { tabContentVariant, settingsPageVariant } from "./Variants";
+import Dropdown from "./Dropdown";
 
-const Proxy = ({ id, active }) => (
-  <motion.div
-    role="tabpanel"
-    id={id}
-    className="tab-content"
-    variants={tabContentVariant}
-    animate={active ? "active" : "inactive"}
-    initial="inactive"
-  >
-    <motion.div variants={settingsPageVariant} className="content-card">
-      <h1>Porxy</h1>
+const Proxy = ({ id, active }) => {
+  const engines = ["Automatic", "Ultraviolet", "Rammerhead", "Dynamic"];
+
+  return (
+    <motion.div
+      role="tabpanel"
+      id={id}
+      className="tab-content"
+      variants={tabContentVariant}
+      animate={active ? "active" : "inactive"}
+      initial="inactive"
+    >
+      <motion.div
+        variants={settingsPageVariant}
+        className="content-card flex flex-row flex-wrap justify-around"
+      >
+        <Dropdown name="Engine" options={engines} />
+      </motion.div>
     </motion.div>
-  </motion.div>
-);
-
+  );
+};
 export default Proxy;
+

src/themes/main.css

@@ -14,6 +14,7 @@
   --input-border-color: #eb6f92;
   --input-border-size: 1.3px;
   --navbar-logo-filter: none;
+  --dropdown-option-hover-color: #6ba6ea;
 }
 
 .font-inter {
@@ -24,3 +25,4 @@
 .font-roboto {
   font-family: "Roboto";
 }
+

tailwind.config.js

@@ -10,9 +10,11 @@ export default {
       "text-hover-color": "var(--navbar-link-hover-color)",
       input: "var(--input-background-color)",
       "input-text": "var(--input-text-color)",
-      "input-border-color": "var(--input-border-color)"
+      "input-border-color": "var(--input-border-color)",
+      "dropdown-option-hover-color": "var(--dropdown-option-hover-color)"
     },
     extend: {}
   },
   plugins: []
 };
+