layout and settings page

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>
     );

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;

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>
+    );
+}

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>
+    );
+}

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: {