This UI is really damn easy to replicate

2025-03-18 01:17:56 -06:00
parent a57072d6f8
commit a972e43c2c
7 changed files with 752 additions and 4 deletions
@@ -3,6 +3,7 @@ import type { Plugin } from 'vite';
 import wisp from "wisp-server-node";
 import node from '@astrojs/node';
 import tailwindcss from '@tailwindcss/vite';
+import icon from "astro-icon";

 const viteWispServer = (): Plugin => {
    return {
@@ -23,6 +24,7 @@ export default defineConfig({
            viteWispServer()
        ]
    },
+    integrations: [icon()],
    output: 'server',
    adapter: node({
        mode: 'middleware'
@@ -19,6 +19,7 @@
    "@tailwindcss/vite": "^4.0.14",
    "@titaniumnetwork-dev/ultraviolet": "^3.2.10",
    "astro": "^5.5.2",
+    "astro-icon": "^1.1.5",
    "fastify": "^5.2.1",
    "tailwindcss": "^4.0.14",
    "vite": "^6.2.2",
@@ -33,6 +34,7 @@
    ]
  },
  "devDependencies": {
+    "@iconify-json/lucide": "^1.2.30",
    "@types/node": "^22.13.10",
    "tsx": "^4.19.3"
  }
@@ -0,0 +1,14 @@
+---
+import { Icon } from "astro-icon/components";
+---
+<div class="h-14 bg-(--background) border-b border-b-(--border) px-4 fixed w-full z-10 flex items-center">
+    <div class="flex items-center gap-3">
+        <button class="inline-flex items-center justify-center whitespcae-nowrap rounded-lg text-sm font-medium ring-(--offset-background) h-10 w-10">
+            <Icon name="lucide:menu" class="text-(--foreground) h-7 w-7" />
+        </button>
+        <a class="flex items-center gap-2" href="/">
+            <Icon name="lucide:radius" class="w-8 h-8 rotate-180 text-(--foreground)" />
+            <h1 class="text-xl font-bold text-(--foreground)"> Radius </h1>
+        </a>
+    </div>
+</div>
@@ -1,4 +1,8 @@
 <script>
    import { Settings } from "@utils/settings.ts";
    const settings = new Settings();
+    window.settings = settings;
+    document.addEventListener('astro:after-swap', async () => {
+        settings.theme()
+    });
 </script>
@@ -3,6 +3,7 @@ import "@styles/themes/default.css";
 import "@styles/global.css";
 import { ClientRouter } from "astro:transitions";
 import SettingsLoader from "@components/SettingsLoader.astro";
+import Header from "@components/Header.astro";
 ---
 <!doctype html>
 <html lang="en">
@@ -16,6 +17,7 @@ import SettingsLoader from "@components/SettingsLoader.astro";
        <ClientRouter fallback="animate" />
 	</head>
    <body class="h-full w-full bg-(--background)">
+        <Header />
        <div class="h-full w-full fixed bg-(--background)">
            <slot />
        </div>
@@ -26,15 +26,15 @@ class Settings {
        return get().next().value! as Settings;
    }

-    theme(theme: string) {
-        this.#storageManager.setVal('theme', theme);
+    theme(theme?: string) {
+        this.#storageManager.setVal('theme', theme || this.#storageManager.getVal('theme'));
        theme === 'default' 
            ? document.documentElement.className = '' 
-            : document.documentElement.className = theme;
+            : document.documentElement.className = theme || this.#storageManager.getVal('theme');
    }

    async *#init() {
-        yield this.theme(this.#storageManager.getVal('theme'));
+        yield this.theme(this.#storageManager.getVal('theme') || 'default');
    }

    constructor() {