Merge pull request #106 from refactor-group/create_shared_page_container

Author: jhodapp

src/app/dashboard/page.tsx

@@ -1,11 +1,16 @@
 import type { Metadata } from "next";
 import { DashboardContainer } from "../../components/ui/dashboard/dashboard-container";
+import { PageContainer } from "@/components/ui/page-container";
 
 export const metadata: Metadata = {
   title: "Dashboard",
   description: "Coaching dashboard",
 };
 
 export default function DashboardPage() {
-  return <DashboardContainer />;
+  return (
+    <PageContainer>
+      <DashboardContainer />
+    </PageContainer>
+  );
 }

src/app/organizations/[id]/members/page.tsx

@@ -9,6 +9,7 @@ import { useUserList } from "@/lib/api/organizations/users";
 import { useOrganizationStateStore } from "@/lib/providers/organization-state-store-provider";
 import { Id } from "@/types/general";
 import { MemberContainer } from "@/components/ui/members/member-container";
+import { PageContainer } from "@/components/ui/page-container";
 
 export default function MembersPage({
   params,
@@ -65,7 +66,7 @@ export default function MembersPage({
   }
 
   return (
-    <div className="container mx-auto p-6 space-y-8">
+    <PageContainer>
       <MemberContainer
         users={users}
         relationships={relationships}
@@ -74,6 +75,6 @@ export default function MembersPage({
         isLoading={isRelationshipsLoading || isUsersLoading}
         openAddMemberDialog={openAddMemberDialog}
       />
-    </div>
+    </PageContainer>
   );
 }

src/components/ui/dashboard/dashboard-container.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from "react";
 import type * as React from "react";
-import { cn } from "@/components/lib/utils";
 import CoachingSessionList from "@/components/ui/dashboard/coaching-session-list";
 import AddEntities from "@/components/ui/dashboard/add-entities";
 import { CoachingSessionDialog } from "@/components/ui/dashboard/coaching-session-dialog";
@@ -25,18 +24,7 @@ export function DashboardContainer() {
   };
 
   return (
-    <div
-      className={cn(
-        // Base styles
-        "p-4",
-        // Mobile: stack vertically
-        "flex flex-col gap-6",
-        // Never grow wider than the site-header
-        "max-w-screen-2xl",
-        // Ensure full width for children
-        "[&>*]:w-full"
-      )}
-    >
+    <>
       <AddEntities
         className="mb-8"
         onCreateSession={() => handleOpenDialog()}
@@ -47,6 +35,6 @@ export function DashboardContainer() {
         onOpenChange={handleCloseDialog}
         coachingSessionToEdit={sessionToEdit}
       />
-    </div>
+    </>
   );
 }

src/components/ui/page-container.tsx

@@ -0,0 +1,26 @@
+import { cn } from "@/components/lib/utils";
+
+/// A reusable parent page container that contains and provides all children components
+/// the right style to adhere to the right max width and padding from the sidebar.
+export function PageContainer({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div
+      className={cn(
+        // Base styles
+        "p-4",
+        // Mobile: stack vertically
+        "flex flex-col gap-6",
+        // Never grow wider than the site-header
+        "max-w-screen-2xl",
+        // Ensure full width for children
+        "[&>*]:w-full"
+      )}
+    >
+      {children}
+    </div>
+  );
+}