Dynamically generate themes, and search engines

2025-04-07 21:22:04 -06:00
parent 415af11053
commit 8af7b073fa
8 changed files with 77 additions and 10 deletions
@@ -2,6 +2,7 @@
    import { Settings } from "@utils/settings.ts";
    import { SW } from "@utils/proxy.ts";
    const settings = new Settings();
+    window.settings = settings;
    const sw = new SW();


@@ -0,0 +1,17 @@
+---
+import type { DropdownOptions } from "@utils/types";
+interface Props {
+    title?: string;
+    id: string;
+    options: DropdownOptions[];
+}
+
+const { title, 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">
+    {options.map((el) => 
+        <option class="w-full bg-(--accent) rounded-sm p-1" value={el.value}>{el.name}</option>
+    )}
+</select>
+<script>
+</script>
@@ -1,8 +1,18 @@
 ---
-import "@styles/global.css";
+import { readdir } from "node:fs";
+import { join as pathJoin } from "node:path";
+//import "@styles/global.css";
 import { ClientRouter } from "astro:transitions";
 import Loader from "@components/Loader.astro";
 import Header from "@components/Header.astro";
+
+import "@styles/global.css";
+import "@styles/default.css";
+readdir(pathJoin(import.meta.dirname, '..', 'styles', 'themes'), { encoding: 'utf-8' }, (err, files) => {
+    files.forEach(async (name) => {
+        await import(`../styles/themes/${name.replace('.css', '')}.css`)
+    });
+});
 ---
 <!doctype html>
 <html lang="en">
@@ -1,7 +1,41 @@
 ---
 import SettingsLayout from "@layouts/SettingsLayout.astro";
+import Dropdown from "@components/ui/Dropdown.astro";
+import { SearchEngines, type DropdownOptions } from "@utils/types";
+const SearchEngineOptions: DropdownOptions[] = [];
+Object.keys(SearchEngines).forEach((k) => SearchEngineOptions.push(
+    { name: k, value: SearchEngines[k] }
+));
 ---
 <SettingsLayout active="proxy">
-    <div class="h-full mt-14 flex-grow">
+    <div class="h-full mt-14 flex-grow px-12 py-8 flex flex-col">
+        <h1 class="text-4xl font-semibold"> Proxy </h1>
+        <div class="border-b border-(--border) w-full mb-4"></div>
+        <div class="w-full flex-grow">
+            <div>
+                <p> Proxy Switcher </p>
+                <Dropdown id="pSwitcher" options={
+                    [
+                        { name: 'gyatt', value: 'skibidi', default: true },
+                        { name: 'ohio', value: 'shit' }
+                    ]
+                } />
+            </div>
+            <div class="mt-2">
+                <p> Proxy Switcher </p>
+                <Dropdown id="pSwitcher" options={
+                    [
+                        { name: 'gyatt', value: 'skibidi', default: true },
+                        { name: 'ohio', value: 'shit' }
+                    ]
+                } />
+            </div>
+            <div class="mt-2">
+                <p> Search Engine </p>
+                <Dropdown id="sSwitcher" options={SearchEngineOptions} />
+            </div>
+            <div class="mt-2">
+            </div>
+        </div>
    </div>
 </SettingsLayout>
@@ -1,12 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

-/* Themes belong here */
-@import "./themes/default.css"; /* DO NOT MOVE THIS FROM HERE OTHERWISE, THEMES WILL FAIL TO WORK */
-@import "./themes/bluelight.css";
-@import "./themes/cyberpunk.css";
-@import "./themes/midnight.css";
-/* End theme imports */
-
@import "tailwindcss";

@theme {
@@ -4,4 +4,16 @@ interface SettingsProps extends Props {
    active: 'appearance' | 'credits' | 'links' | 'proxy';
 }

-export type { SettingsProps };
+type DropdownOptions = {
+    name: string;
+    value: string;
+    default?: boolean;
+};
+
+const SearchEngines: Record<string, string> = {
+    DuckDuckGo: "https://duckduckgo.com/?q=%s",
+    Google: "https://google.com/search?q=%s",
+    Bing: "https://bing.com/search?q=%s",
+};
+
+export { type SettingsProps, type DropdownOptions, SearchEngines };