Feat: theme switching

src/layouts/SettingsLayout.astro

@@ -4,13 +4,17 @@ import SettingsNav from "@components/SettingsNav.astro";
 import type { SettingsProps as Props } from "@utils/types.ts";
 
 //I love prop drilling
-const { active } = Astro.props;
+const { active, title } = 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 class="h-full mt-14 flex-grow px-12 py-8 flex flex-col">
+            <h1 class="text-4xl font-semibold"> {title} </h1>
+            <div class="border-b border-(--border) w-full mb-4"></div>
+            <slot />
+        </div>
     </div>
 </Layout>