From 7a8b382b0257f881341308d19d2f3c536b8748f5 Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Sun, 28 Dec 2025 00:26:11 +0000
Subject: [PATCH] SettingsPageLayout wrapper component

---
 packages/frontend/src/Account.tsx             | 14 ++++--------
 packages/frontend/src/Organisations.tsx       | 14 ++++--------
 .../src/components/settings-page-layout.tsx   | 22 +++++++++++++++++++
 3 files changed, 30 insertions(+), 20 deletions(-)
 create mode 100644 packages/frontend/src/components/settings-page-layout.tsx

diff --git a/packages/frontend/src/Account.tsx b/packages/frontend/src/Account.tsx
index 4756fae..c4944c3 100644
--- a/packages/frontend/src/Account.tsx
+++ b/packages/frontend/src/Account.tsx
@@ -1,16 +1,10 @@
-import { Link } from "react-router-dom";
+import { SettingsPageLayout } from "@/components/settings-page-layout";
 
 function Account() {
     return (
-        <main className="w-full h-[100vh] flex flex-col items-start gap-4 p-4">
-            <h1 className="text-3xl font-600">Account</h1>
-
-            <p className="text-muted-foreground">Account page here</p>
-
-            <Link to="/" className="">
-                Go to Home
-            </Link>
-        </main>
+        <SettingsPageLayout title="Account">
+            <p className="font-400">Account page here</p>
+        </SettingsPageLayout>
     );
 }
 
diff --git a/packages/frontend/src/Organisations.tsx b/packages/frontend/src/Organisations.tsx
index 14d2112..05a9d6e 100644
--- a/packages/frontend/src/Organisations.tsx
+++ b/packages/frontend/src/Organisations.tsx
@@ -1,16 +1,10 @@
-import { Link } from "react-router-dom";
+import { SettingsPageLayout } from "@/components/settings-page-layout";
 
 function Organisations() {
     return (
-        <main className="w-full h-[100vh] flex flex-col items-start gap-4 p-4">
-            <h1 className="text-3xl font-600">Organisations</h1>
-
-            <p className="text-muted-foreground">Organisations page here</p>
-
-            <Link to="/" className="">
-                Go to Home
-            </Link>
-        </main>
+        <SettingsPageLayout title="Organisations">
+            <p className="font-400">Organisations page here</p>
+        </SettingsPageLayout>
     );
 }
 
diff --git a/packages/frontend/src/components/settings-page-layout.tsx b/packages/frontend/src/components/settings-page-layout.tsx
new file mode 100644
index 0000000..a2637ea
--- /dev/null
+++ b/packages/frontend/src/components/settings-page-layout.tsx
@@ -0,0 +1,22 @@
+import { Home } from "lucide-react";
+import type { ReactNode } from "react";
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+
+export function SettingsPageLayout({ title, children }: { title: string; children?: ReactNode }) {
+    return (
+        <main className="w-full min-h-[100vh] flex flex-col items-start">
+            <div className="flex items-center gap-4 w-full border-b px-2 py-2">
+                <Button asChild variant="ghost" size="icon">
+                    <Link to="/">
+                        <Home />
+                    </Link>
+                </Button>
+
+                <h1 className="text-3xl font-600">{title}</h1>
+            </div>
+
+            <div className="w-full px-4 py-4 text-md">{children}</div>
+        </main>
+    );
+}