Feat: wisp server switcher

src/components/Loader.astro

@@ -3,8 +3,13 @@
     import { SW } from "@utils/proxy.ts";
     const settings = new Settings();
     const sw = new SW();
+    
+    const init = async () => {
+        settings.searchEngine();
+        await sw.wispServer();
+    }
 
-
+    init();
     document.addEventListener('astro:after-swap', async () => {
         //const settings = await Settings.getInstance();
         settings.theme();

src/components/ui/Button.astro

@@ -0,0 +1,14 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+    id: string;
+    text: string;
+    icon?: string
+}
+const { id, text, icon } = Astro.props;
+---
+<button id={id} class="bg-(--primary) hover:bg-(--primary)/90 cursor-pointer text-(--primary-foreground) inline-flex items-center jusitfy-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors h-10 px-4 py-2">
+    {icon ? <Icon name={icon} class="text-(--primary-foreground) h-5 w-5 mr-2" /> : null}  
+    {text}
+</button>

src/components/ui/Dropdown.astro

@@ -7,7 +7,7 @@ interface Props {
 
 const { id, options } = Astro.props;
 ---
-<select id=`dropdownBox-${id}` class="flex h-10 w-[180px] items-center justify-between text-(--foreground) background-(--background) rounded-lg border border-(--border) px-3 py-2">
+<select id=`dropdownBox-${id}` class="cursor-pointer flex h-10 w-[180px] items-center justify-between text-(--foreground) background-(--background) rounded-lg border border-(--border) px-3 py-2">
     {options.map((el) => 
         <option class="w-full bg-(--accent) rounded-sm p-1" value={el.value}>{el.name}</option>
     )}

src/components/ui/Input.astro

@@ -0,0 +1,8 @@
+---
+interface Props {
+    placeholder: string;
+    id: string;
+}
+const { placeholder, id } = Astro.props;
+---
+<input class="h-10 w-full rounded-md border border-(--border) px-3 py-2 text-sm" placeholder={placeholder} id={id} ></input>