From b5976b99435a3a03204cac3f3a5274211eacc359 Mon Sep 17 00:00:00 2001
From: wearrrrr <contact@wearr.dev>
Date: Fri, 12 Jan 2024 00:05:22 -0600
Subject: [PATCH] Make the dropdown better, lose my sanity even more.

---
 src/components/Dropdown.astro | 15 ++++++++++++---
 src/components/TabList.astro  |  6 ++++--
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/Dropdown.astro b/src/components/Dropdown.astro
index 29dc80c..4867327 100644
--- a/src/components/Dropdown.astro
+++ b/src/components/Dropdown.astro
@@ -1,14 +1,23 @@
 ---
 // TODO: Add Props to make this component more dynamic!!
+
+const { buttonNameDefault, dropdownList } = Astro.props;
 ---
 
 <div class="dropdown">
     <button id="dropdown-toggle" class="dropdown-toggle" type="button" data-toggle="dropdown">
-        Auto
+        {buttonNameDefault}
         <span class="caret"></span></button>
     <ul class="dropdown-menu">
-        <li class="dropdown-item" id="proxy-auto" data-setting="auto">Auto</li>
-        <li class="dropdown-item" id="proxy-ultraviolet" data-setting="ultraviolet">Ultraviolet</li>
+    {
+        dropdownList.map((item: any) => {
+            return (
+                <li class="dropdown-item" id={`proxy-${item.toLowerCase()}`} data-setting={item.toLowerCase()}>{item}</li>
+            )
+        })
+    }
+        <!-- <li class="dropdown-item" id="proxy-auto" data-setting="auto">Auto</li>
+        <li class="dropdown-item" id="proxy-ultraviolet" data-setting="ultraviolet">Ultraviolet</li> -->
     </ul>
 </div>
 <style>
diff --git a/src/components/TabList.astro b/src/components/TabList.astro
index 226390c..99ad08e 100644
--- a/src/components/TabList.astro
+++ b/src/components/TabList.astro
@@ -6,7 +6,7 @@ import Dropdown from "./Dropdown.astro";
     <div id="content-setting-tab-proxy">
         <h1 style="color: white;">Proxy</h1>
         <p style="color: white; font-size: 18px;">Selected Proxy</p>
-        <Dropdown></Dropdown>
+        <Dropdown buttonDefaultName="Auto" dropdownList={["Auto", "Ultraviolet", "Dynamic"]}></Dropdown>
     </div>
     <div id="content-setting-tab-customization">
         <h1 style="color: white;">Customization</h1>
@@ -79,6 +79,8 @@ import Dropdown from "./Dropdown.astro";
     })
     loadContent('setting-tab-proxy')
 
+    const dropdownHeight = '120px'
+
     function addDropdownListener() {
       let dropdown_toggle = document.getElementById('dropdown-toggle');
         if (dropdown_toggle) {
@@ -86,7 +88,7 @@ import Dropdown from "./Dropdown.astro";
             let dropdown = document.getElementsByClassName('dropdown-menu')[0];
             if (dropdown) {
                 if (dropdown.style.height == '0px' || dropdown.style.height == '') {
-                    dropdown.style.height = '80px';
+                    dropdown.style.height = dropdownHeight;
                     dropdown_toggle.style.borderRadius = '10px 10px 0 0';
                 } else {
                     dropdown.style.height = '0px';