Make settings layout

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"

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"

src/layouts/SettingsLayout.astro

@@ -0,0 +1,9 @@
+---
+const { title } = Astro.props;
+---
+
+<div>
+  <p>Settings</p>
+  <p>{title}</p>
+  <slot />
+</div>

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>

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;