refactor and reorganize

src/app/[orgId]/settings/access/AccessPageHeaderAndNav.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { SidebarSettings } from "@app/components/SidebarSettings";
+
+type AccessPageHeaderAndNavProps = {
+    children: React.ReactNode;
+};
+
+export default function AccessPageHeaderAndNav({
+    children,
+}: AccessPageHeaderAndNavProps) {
+    const sidebarNavItems = [
+        {
+            title: "Users",
+            href: `/{orgId}/settings/access/users`,
+        },
+        {
+            title: "Roles",
+            href: `/{orgId}/settings/access/roles`,
+        },
+    ];
+
+    return (
+        <>
+            <SettingsSectionTitle
+                title="Manage Users & Roles"
+                description="Invite users and add them to roles to manage access to your
+            organization"
+            />
+
+            <SidebarSettings sidebarNavItems={sidebarNavItems}>
+                {children}
+            </SidebarSettings>
+        </>
+    );
+}