From 57978f511a9a82e3d0e05fadbc3cc24a9318c21d Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Wed, 7 Jan 2026 15:18:45 +0000
Subject: [PATCH] layout and settings page

---
 src/App.tsx                  | 19 ++++++++++++++++++-
 src/Index.tsx                | 14 +-------------
 src/Layout.tsx               | 27 +++++++++++++++++++++++++++
 src/Settings.tsx             |  7 +++++++
 src/components/ui/button.tsx |  2 +-
 5 files changed, 54 insertions(+), 15 deletions(-)
 create mode 100644 src/Layout.tsx
 create mode 100644 src/Settings.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 987586b..8ea022e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,28 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Index from "@/Index";
+import Settings from "./Settings";
+import Layout from "./Layout";
 
 function App() {
     return (
         <BrowserRouter>
             <Routes>
-                <Route path="/" element={<Index />} />
+                <Route
+                    path="/"
+                    element={
+                        <Layout>
+                            <Index />
+                        </Layout>
+                    }
+                />
+                <Route
+                    path="/settings"
+                    element={
+                        <Layout>
+                            <Settings />
+                        </Layout>
+                    }
+                />
             </Routes>
         </BrowserRouter>
     );
diff --git a/src/Index.tsx b/src/Index.tsx
index 8dd2bf7..e26ff2e 100644
--- a/src/Index.tsx
+++ b/src/Index.tsx
@@ -1,17 +1,5 @@
-import ThemeToggle from "./components/theme-toggle";
-
 function Index() {
-    return (
-        <div className="flex flex-col h-[100vh] items-center">
-            <header className="w-full flex items-center justify-between border-b h-12 p-2">
-                <h1 className="text-3xl font-bold">The Shape of Sound</h1>
-                <ThemeToggle />
-            </header>
-            <main className="w-full flex-1 p-4 flex items-center justify-center">
-                <div className="w-64 h-64 bg-orange-600 rounded-full" />
-            </main>{" "}
-        </div>
-    );
+    return <div className="w-64 h-64 bg-orange-600 rounded-full" />;
 }
 
 export default Index;
diff --git a/src/Layout.tsx b/src/Layout.tsx
new file mode 100644
index 0000000..25ac1e8
--- /dev/null
+++ b/src/Layout.tsx
@@ -0,0 +1,27 @@
+import ThemeToggle from "@/components/theme-toggle";
+import { Link, useLocation } from "react-router-dom";
+import { Home, Settings } from "lucide-react";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+    const router = useLocation();
+
+    return (
+        <div className="flex flex-col h-[100vh] items-center">
+            <header className="w-full flex items-center justify-between border-b h-12 p-2">
+                <ThemeToggle />
+                <h1 className="text-3xl font-bold">The Shape of Sound</h1>
+                {router.pathname !== "/settings" && (
+                    <Link to="/settings" className="">
+                        <Settings />
+                    </Link>
+                )}
+                {router.pathname !== "/" && (
+                    <Link to="/" className="">
+                        <Home />
+                    </Link>
+                )}
+            </header>
+            <main className="w-full flex-1 p-4 flex items-center justify-center">{children}</main>
+        </div>
+    );
+}
diff --git a/src/Settings.tsx b/src/Settings.tsx
new file mode 100644
index 0000000..955efef
--- /dev/null
+++ b/src/Settings.tsx
@@ -0,0 +1,7 @@
+export default function Settings() {
+    return (
+        <div className="w-full h-full flex flex-col items-center justify-start">
+            <p>Settings Page</p>
+        </div>
+    );
+}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index d7be2d2..f0dec4b 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -16,7 +16,7 @@ const buttonVariants = cva(
                     "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
                 secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
                 ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-                dummy: "bg-transparent hover:bg-accent/50 dark:hover:bg-accent/30",
+                dummy: "bg-transparent",
                 link: "text-primary underline-offset-4 hover:underline",
             },
             size: {