From e91a913b624cd96d65ea52e5586734e0c68d4c6d Mon Sep 17 00:00:00 2001
From: rift <117926989+Riftriot@users.noreply.github.com>
Date: Wed, 24 Jul 2024 23:22:05 -0500
Subject: [PATCH] Make settings layout

---
 src/components/Header.astro                |  5 ++++-
 src/components/MobileNavigation.astro      |  7 +++++--
 src/layouts/SettingsLayout.astro           |  9 +++++++++
 src/pages/[lang]/settings/appearance.astro | 17 +++++++++++++++++
 src/pages/index.astro                      |  4 ++--
 5 files changed, 37 insertions(+), 5 deletions(-)
 create mode 100644 src/layouts/SettingsLayout.astro
 create mode 100644 src/pages/[lang]/settings/appearance.astro

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 1d72c8c..0e63fa0 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -31,7 +31,10 @@ const t = useTranslations(lang);
           /* Astro won't let us pass the icon as a prop so it's going into the outlet here. */
         }
       </HeaderButton>
-      <HeaderButton text={t("header.settings")}>
+      <HeaderButton
+        text={t("header.settings")}
+        route={`/${lang}/settings/appearance`}
+      >
         <Icon
           name="ph:wrench-fill"
           class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
diff --git a/src/components/MobileNavigation.astro b/src/components/MobileNavigation.astro
index 531b90f..8ccb66a 100644
--- a/src/components/MobileNavigation.astro
+++ b/src/components/MobileNavigation.astro
@@ -9,7 +9,7 @@ const t = useTranslations(lang);
 <div
   class="h-full mt-16 flex w-full flex-col justify-evenly md:flex-row bg-navbar-color m-auto"
   id="mobileNavMenu"
-> 
+>
   <HeaderButton text={t("header.home")} route={`/${lang}/`}>
     <Icon
       name="ph:house-bold"
@@ -22,7 +22,10 @@ const t = useTranslations(lang);
       class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
     />
   </HeaderButton>
-  <HeaderButton text={t("header.settings")}>
+  <HeaderButton
+    text={t("header.settings")}
+    route={`/${lang}/settings/appearance`}
+  >
     <Icon
       name="ph:wrench-fill"
       class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
diff --git a/src/layouts/SettingsLayout.astro b/src/layouts/SettingsLayout.astro
new file mode 100644
index 0000000..670ce11
--- /dev/null
+++ b/src/layouts/SettingsLayout.astro
@@ -0,0 +1,9 @@
+---
+const { title } = Astro.props;
+---
+
+<div>
+  <p>Settings</p>
+  <p>{title}</p>
+  <slot />
+</div>
diff --git a/src/pages/[lang]/settings/appearance.astro b/src/pages/[lang]/settings/appearance.astro
new file mode 100644
index 0000000..5e881bd
--- /dev/null
+++ b/src/pages/[lang]/settings/appearance.astro
@@ -0,0 +1,17 @@
+---
+import Layout from "../../../layouts/Layout.astro";
+import SettingsLayout from "../../../layouts/SettingsLayout.astro";
+export function getStaticPaths() {
+  const STATIC_PATHS = [
+    { params: { lang: "en_US" } },
+    { params: { lang: "jp" } },
+  ];
+  return STATIC_PATHS;
+}
+---
+
+<Layout title="Settings">
+  <SettingsLayout title="Appearance">
+    <p>Appearance settings here!</p>
+  </SettingsLayout>
+</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a6351b6..43f5c2e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,9 +4,9 @@ import Card from "../components/Card.astro";
 ---
 
 loading...
-<script>
+<script is:inline>
   let currentLang = localStorage.getItem("selectedLanguage");
-  const redirect = (loc: string) => (window.location.href = loc);
+  const redirect = (loc) => (window.location.href = loc);
   if (currentLang) {
     try {
       let parsed = JSON.parse(currentLang).value;