From 415af11053c6aae07693c4d652820e1445807337 Mon Sep 17 00:00:00 2001
From: MotorTruck1221 <motortruck1221@protonmail.com>
Date: Sat, 5 Apr 2025 20:04:58 -0600
Subject: [PATCH] Add settings pages & header

---
 src/components/SettingsNav.astro         | 20 ++++++++++++++++++++
 src/layouts/SettingsLayout.astro         | 16 ++++++++++++++++
 src/pages/[...settings]/appearance.astro |  5 +++++
 src/pages/[...settings]/credits.astro    |  5 +++++
 src/pages/[...settings]/links.astro      |  5 +++++
 src/pages/[...settings]/proxy.astro      |  7 +++++++
 src/pages/settings.astro                 |  5 -----
 src/utils/types.ts                       |  7 +++++++
 8 files changed, 65 insertions(+), 5 deletions(-)
 create mode 100644 src/components/SettingsNav.astro
 create mode 100644 src/layouts/SettingsLayout.astro
 create mode 100644 src/pages/[...settings]/appearance.astro
 create mode 100644 src/pages/[...settings]/credits.astro
 create mode 100644 src/pages/[...settings]/links.astro
 create mode 100644 src/pages/[...settings]/proxy.astro
 delete mode 100644 src/pages/settings.astro
 create mode 100644 src/utils/types.ts

diff --git a/src/components/SettingsNav.astro b/src/components/SettingsNav.astro
new file mode 100644
index 0000000..cb8313c
--- /dev/null
+++ b/src/components/SettingsNav.astro
@@ -0,0 +1,20 @@
+---
+import { Icon } from "astro-icon/components";
+import type { SettingsProps as Props } from "@utils/types.ts";
+
+const { active } = Astro.props; 
+---
+<div class="h-full w-full flex flex-col font-inter p-4 pl-8 pt-8 gap-2">
+    <a href="/settings/proxy/" class=`gap-2 px-4 py-2 rounded-lg h-10 w-full text-sm font-medium transition-colors items-center justify-start inline-flex ${active === "proxy" ? 'bg-(--secondary) hover:bg-(--secondary)/[0.8]' : 'bg-(--background) hover:bg-(--accent)'}`>
+        <Icon name="lucide:lock" class="h-5 w-5" /> Proxy
+    </a>
+    <a href="/settings/appearance/" class=`gap-2 px-4 py-2 rounded-lg h-10 w-full text-sm font-medium transition-colors items-center justify-start inline-flex ${active === "appearance" ? 'bg-(--secondary) hover:bg-(--secondary)/[0.8]' : 'bg-(--background) hover:bg-(--accent)'}`>
+        <Icon name="lucide:palette" class="h-5 w-5" /> Appearance
+    </a>
+    <a href="/settings/credits/" class=`gap-2 px-4 py-2 rounded-lg h-10 w-full text-sm font-medium transition-colors items-center justify-start inline-flex ${active === "credits" ? 'bg-(--secondary) hover:bg-(--secondary)/[0.8]' : 'bg-(--background) hover:bg-(--accent)'}`>
+        <Icon name="lucide:users" class="h-5 w-5" /> Credits
+    </a>
+    <a href="/settings/links/" class=`gap-2 px-4 py-2 rounded-lg h-10 w-full text-sm font-medium transition-colors items-center justify-start inline-flex ${active === "links" ? 'bg-(--secondary) hover:bg-(--secondary)/[0.8]' : 'bg-(--background) hover:bg-(--accent)'}`>
+        <Icon name="lucide:link" class="h-5 w-5" /> Social Links
+    </a>
+</div>
diff --git a/src/layouts/SettingsLayout.astro b/src/layouts/SettingsLayout.astro
new file mode 100644
index 0000000..6bb88b9
--- /dev/null
+++ b/src/layouts/SettingsLayout.astro
@@ -0,0 +1,16 @@
+---
+import Layout from "@layouts/Layout.astro";
+import SettingsNav from "@components/SettingsNav.astro";
+import type { SettingsProps as Props } from "@utils/types.ts";
+
+//I love prop drilling
+const { active } = Astro.props;
+---
+<Layout>
+    <div class="h-full w-full flex font-inter">
+        <div class="w-1/4 bg-(--background) flex mt-14">
+            <SettingsNav active={active} />
+        </div>
+        <slot />
+    </div>
+</Layout>
diff --git a/src/pages/[...settings]/appearance.astro b/src/pages/[...settings]/appearance.astro
new file mode 100644
index 0000000..b4dc9ab
--- /dev/null
+++ b/src/pages/[...settings]/appearance.astro
@@ -0,0 +1,5 @@
+---
+import SettingsLayout from "@layouts/SettingsLayout.astro";
+---
+<SettingsLayout active="appearance">
+</SettingsLayout>
diff --git a/src/pages/[...settings]/credits.astro b/src/pages/[...settings]/credits.astro
new file mode 100644
index 0000000..3da2a1a
--- /dev/null
+++ b/src/pages/[...settings]/credits.astro
@@ -0,0 +1,5 @@
+---
+import SettingsLayout from "@layouts/SettingsLayout.astro";
+---
+<SettingsLayout active="credits">
+</SettingsLayout>
diff --git a/src/pages/[...settings]/links.astro b/src/pages/[...settings]/links.astro
new file mode 100644
index 0000000..e7b681e
--- /dev/null
+++ b/src/pages/[...settings]/links.astro
@@ -0,0 +1,5 @@
+---
+import SettingsLayout from "@layouts/SettingsLayout.astro";
+---
+<SettingsLayout active="links">
+</SettingsLayout>
diff --git a/src/pages/[...settings]/proxy.astro b/src/pages/[...settings]/proxy.astro
new file mode 100644
index 0000000..1bd8028
--- /dev/null
+++ b/src/pages/[...settings]/proxy.astro
@@ -0,0 +1,7 @@
+---
+import SettingsLayout from "@layouts/SettingsLayout.astro";
+---
+<SettingsLayout active="proxy">
+    <div class="h-full mt-14 flex-grow">
+    </div>
+</SettingsLayout>
diff --git a/src/pages/settings.astro b/src/pages/settings.astro
deleted file mode 100644
index 9497300..0000000
--- a/src/pages/settings.astro
+++ /dev/null
@@ -1,5 +0,0 @@
----
-import Layout from "@layouts/Layout.astro";
----
-<Layout>
-</Layout>
diff --git a/src/utils/types.ts b/src/utils/types.ts
new file mode 100644
index 0000000..6f7d76c
--- /dev/null
+++ b/src/utils/types.ts
@@ -0,0 +1,7 @@
+import type { Props } from "astro";
+
+interface SettingsProps extends Props {
+    active: 'appearance' | 'credits' | 'links' | 'proxy';
+}
+
+export type { SettingsProps };