gamezonline/Radius
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

This UI is really damn easy to replicate

Browse Source
This commit is contained in:
MotorTruck1221
2025-03-18 01:17:56 -06:00
parent a57072d6f8
commit a972e43c2c
7 changed files with 752 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
astro.config.ts
+2
View File
@@ -3,6 +3,7 @@ import type { Plugin } from 'vite';
import wisp from "wisp-server-node"; import wisp from "wisp-server-node";
import node from '@astrojs/node'; import node from '@astrojs/node';
import tailwindcss from '@tailwindcss/vite'; import tailwindcss from '@tailwindcss/vite';
import icon from "astro-icon";
const viteWispServer = (): Plugin => { const viteWispServer = (): Plugin => {
return { return {
@@ -23,6 +24,7 @@ export default defineConfig({
viteWispServer() viteWispServer()
] ]
}, },
integrations: [icon()],
output: 'server', output: 'server',
adapter: node({ adapter: node({
mode: 'middleware' mode: 'middleware'
package.json
+2
View File
@@ -19,6 +19,7 @@
"@tailwindcss/vite": "^4.0.14", "@tailwindcss/vite": "^4.0.14",
"@titaniumnetwork-dev/ultraviolet": "^3.2.10", "@titaniumnetwork-dev/ultraviolet": "^3.2.10",
"astro": "^5.5.2", "astro": "^5.5.2",
"astro-icon": "^1.1.5",
"fastify": "^5.2.1", "fastify": "^5.2.1",
"tailwindcss": "^4.0.14", "tailwindcss": "^4.0.14",
"vite": "^6.2.2", "vite": "^6.2.2",
@@ -33,6 +34,7 @@
] ]
}, },
"devDependencies": { "devDependencies": {
"@iconify-json/lucide": "^1.2.30",
"@types/node": "^22.13.10", "@types/node": "^22.13.10",
"tsx": "^4.19.3" "tsx": "^4.19.3"
} }
pnpm-lock.yaml
Generated
+724
View File
File diff suppressed because it is too large Load Diff
src/components/Header.astro
+14
View File
@@ -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>
src/components/SettingsLoader.astro
+4
View File
@@ -1,4 +1,8 @@
<script> <script>
import { Settings } from "@utils/settings.ts"; import { Settings } from "@utils/settings.ts";
const settings = new Settings(); const settings = new Settings();
window.settings = settings;
document.addEventListener('astro:after-swap', async () => {
settings.theme()
});
</script> </script>
src/layouts/Layout.astro
+2
View File
@@ -3,6 +3,7 @@ import "@styles/themes/default.css";
import "@styles/global.css"; import "@styles/global.css";
import { ClientRouter } from "astro:transitions"; import { ClientRouter } from "astro:transitions";
import SettingsLoader from "@components/SettingsLoader.astro"; import SettingsLoader from "@components/SettingsLoader.astro";
import Header from "@components/Header.astro";
--- ---
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
@@ -16,6 +17,7 @@ import SettingsLoader from "@components/SettingsLoader.astro";
<ClientRouter fallback="animate" /> <ClientRouter fallback="animate" />
</head> </head>
<body class="h-full w-full bg-(--background)"> <body class="h-full w-full bg-(--background)">
<Header />
<div class="h-full w-full fixed bg-(--background)"> <div class="h-full w-full fixed bg-(--background)">
<slot /> <slot />
</div> </div>
src/utils/settings.ts
+4 -4
View File
@@ -26,15 +26,15 @@ class Settings {
return get().next().value! as Settings; return get().next().value! as Settings;
} }
theme(theme: string) { theme(theme?: string) {
this.#storageManager.setVal('theme', theme); this.#storageManager.setVal('theme', theme || this.#storageManager.getVal('theme'));
theme === 'default' theme === 'default'
? document.documentElement.className = '' ? document.documentElement.className = ''
: document.documentElement.className = theme; : document.documentElement.className = theme || this.#storageManager.getVal('theme');
} }
async *#init() { async *#init() {
yield this.theme(this.#storageManager.getVal('theme')); yield this.theme(this.#storageManager.getVal('theme') || 'default');
} }
constructor() { constructor() {