ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-08 18:33:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

SettingsPageLayout wrapper component

Browse Source
This commit is contained in:
Oliver Bryan
2025-12-28 00:26:11 +00:00
parent 22886335e1
commit 7a8b382b02
3 changed files with 30 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/frontend/src/Account.tsx
View File

@@ -1,16 +1,10 @@
import { Link } from "react-router-dom"; import { SettingsPageLayout } from "@/components/settings-page-layout";
function Account() { function Account() {
return ( return (
<main className="w-full h-[100vh] flex flex-col items-start gap-4 p-4"> <SettingsPageLayout title="Account">
<h1 className="text-3xl font-600">Account</h1> <p className="font-400">Account page here</p>
</SettingsPageLayout>
<p className="text-muted-foreground">Account page here</p>
<Link to="/" className="">
Go to Home
</Link>
</main>
); );
} }

14
packages/frontend/src/Organisations.tsx
View File

@@ -1,16 +1,10 @@
import { Link } from "react-router-dom"; import { SettingsPageLayout } from "@/components/settings-page-layout";
function Organisations() { function Organisations() {
return ( return (
<main className="w-full h-[100vh] flex flex-col items-start gap-4 p-4"> <SettingsPageLayout title="Organisations">
<h1 className="text-3xl font-600">Organisations</h1> <p className="font-400">Organisations page here</p>
</SettingsPageLayout>
<p className="text-muted-foreground">Organisations page here</p>
<Link to="/" className="">
Go to Home
</Link>
</main>
); );
} }

22
packages/frontend/src/components/settings-page-layout.tsx Normal file
View File

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