From 24c9a9d0974c5bfb5db9906751dfced9a542670f Mon Sep 17 00:00:00 2001
From: Samuel Mwangi <samuel@samuelmwangi.co.ke>
Date: Sun, 15 Dec 2024 20:06:10 +0300
Subject: [PATCH] No need to wrap the entire page in the PageHeader component

---
 .../inertia/resources/js/Pages/API/Index.vue  | 28 ++++-----
 .../inertia/resources/js/Pages/Dashboard.vue  | 22 +++----
 .../resources/js/Pages/Profile/Show.vue       | 62 +++++++++----------
 .../resources/js/Pages/Teams/Create.vue       | 20 +++---
 .../inertia/resources/js/Pages/Teams/Show.vue | 40 ++++++------
 5 files changed, 81 insertions(+), 91 deletions(-)

diff --git a/stubs/inertia/resources/js/Pages/API/Index.vue b/stubs/inertia/resources/js/Pages/API/Index.vue
index f07a69a2..d45d62a4 100644
--- a/stubs/inertia/resources/js/Pages/API/Index.vue
+++ b/stubs/inertia/resources/js/Pages/API/Index.vue
@@ -15,21 +15,19 @@ defineProps({
 </script>
 
 <template>
-    <PageContainer title="API Tokens">
-        <template #header>
-            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-                API Tokens
-            </h2>
-        </template>
+    <PageHeader title="API Tokens">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            API Tokens
+        </h2>
+    </PageHeader>
 
-        <div>
-            <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
-                <ApiTokenManager
-                    :tokens="tokens"
-                    :available-permissions="availablePermissions"
-                    :default-permissions="defaultPermissions"
-                />
-            </div>
+    <div>
+        <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
+            <ApiTokenManager
+                :tokens="tokens"
+                :available-permissions="availablePermissions"
+                :default-permissions="defaultPermissions"
+            />
         </div>
-    </PageContainer>
+    </div>
 </template>
diff --git a/stubs/inertia/resources/js/Pages/Dashboard.vue b/stubs/inertia/resources/js/Pages/Dashboard.vue
index 0cfffe59..39ca0511 100644
--- a/stubs/inertia/resources/js/Pages/Dashboard.vue
+++ b/stubs/inertia/resources/js/Pages/Dashboard.vue
@@ -9,19 +9,17 @@ defineOptions({
 </script>
 
 <template>
-    <PageContainer title="Dashboard">
-        <template #header>
-            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-                Dashboard
-            </h2>
-        </template>
+    <PageHeader title="Dashboard">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            Dashboard
+        </h2>
+    </PageHeader>
 
-        <div class="py-12">
-            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">
-                    <Welcome />
-                </div>
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">
+                <Welcome />
             </div>
         </div>
-    </PageContainer>
+    </div>
 </template>
diff --git a/stubs/inertia/resources/js/Pages/Profile/Show.vue b/stubs/inertia/resources/js/Pages/Profile/Show.vue
index fdb31f37..952e4684 100644
--- a/stubs/inertia/resources/js/Pages/Profile/Show.vue
+++ b/stubs/inertia/resources/js/Pages/Profile/Show.vue
@@ -19,44 +19,42 @@ defineProps({
 </script>
 
 <template>
-    <PageContainer title="Profile">
-        <template #header>
-            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-                Profile
-            </h2>
-        </template>
-
-        <div>
-            <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
-                <div v-if="$page.props.jetstream.canUpdateProfileInformation">
-                    <UpdateProfileInformationForm :user="$page.props.auth.user" />
-
-                    <SectionBorder />
-                </div>
+    <PageHeader title="Profile">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            Profile
+        </h2>
+    </PageHeader>
+
+    <div>
+        <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
+            <div v-if="$page.props.jetstream.canUpdateProfileInformation">
+                <UpdateProfileInformationForm :user="$page.props.auth.user" />
+
+                <SectionBorder />
+            </div>
 
-                <div v-if="$page.props.jetstream.canUpdatePassword">
-                    <UpdatePasswordForm class="mt-10 sm:mt-0" />
+            <div v-if="$page.props.jetstream.canUpdatePassword">
+                <UpdatePasswordForm class="mt-10 sm:mt-0" />
 
-                    <SectionBorder />
-                </div>
+                <SectionBorder />
+            </div>
 
-                <div v-if="$page.props.jetstream.canManageTwoFactorAuthentication">
-                    <TwoFactorAuthenticationForm
-                        :requires-confirmation="confirmsTwoFactorAuthentication"
-                        class="mt-10 sm:mt-0"
-                    />
+            <div v-if="$page.props.jetstream.canManageTwoFactorAuthentication">
+                <TwoFactorAuthenticationForm
+                    :requires-confirmation="confirmsTwoFactorAuthentication"
+                    class="mt-10 sm:mt-0"
+                />
 
-                    <SectionBorder />
-                </div>
+                <SectionBorder />
+            </div>
 
-                <LogoutOtherBrowserSessionsForm :sessions="sessions" class="mt-10 sm:mt-0" />
+            <LogoutOtherBrowserSessionsForm :sessions="sessions" class="mt-10 sm:mt-0" />
 
-                <template v-if="$page.props.jetstream.hasAccountDeletionFeatures">
-                    <SectionBorder />
+            <template v-if="$page.props.jetstream.hasAccountDeletionFeatures">
+                <SectionBorder />
 
-                    <DeleteUserForm class="mt-10 sm:mt-0" />
-                </template>
-            </div>
+                <DeleteUserForm class="mt-10 sm:mt-0" />
+            </template>
         </div>
-    </PageContainer>
+    </div>
 </template>
diff --git a/stubs/inertia/resources/js/Pages/Teams/Create.vue b/stubs/inertia/resources/js/Pages/Teams/Create.vue
index 9b40a269..b22afdc2 100644
--- a/stubs/inertia/resources/js/Pages/Teams/Create.vue
+++ b/stubs/inertia/resources/js/Pages/Teams/Create.vue
@@ -9,17 +9,15 @@ defineOptions({
 </script>
 
 <template>
-    <PageContainer title="Create Team">
-        <template #header>
-            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-                Create Team
-            </h2>
-        </template>
+    <PageHeader title="Create Team">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            Create Team
+        </h2>
+    </PageHeader>
 
-        <div>
-            <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
-                <CreateTeamForm />
-            </div>
+    <div>
+        <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
+            <CreateTeamForm />
         </div>
-    </PageContainer>
+    </div>
 </template>
diff --git a/stubs/inertia/resources/js/Pages/Teams/Show.vue b/stubs/inertia/resources/js/Pages/Teams/Show.vue
index 4595b045..f357d8e6 100644
--- a/stubs/inertia/resources/js/Pages/Teams/Show.vue
+++ b/stubs/inertia/resources/js/Pages/Teams/Show.vue
@@ -18,30 +18,28 @@ defineProps({
 </script>
 
 <template>
-    <PageContainer title="Team Settings">
-        <template #header>
-            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-                Team Settings
-            </h2>
-        </template>
+    <PageHeader title="Team Settings">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            Team Settings
+        </h2>
+    </PageHeader>
 
-        <div>
-            <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
-                <UpdateTeamNameForm :team="team" :permissions="permissions" />
+    <div>
+        <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
+            <UpdateTeamNameForm :team="team" :permissions="permissions" />
 
-                <TeamMemberManager
-                    class="mt-10 sm:mt-0"
-                    :team="team"
-                    :available-roles="availableRoles"
-                    :user-permissions="permissions"
-                />
+            <TeamMemberManager
+                class="mt-10 sm:mt-0"
+                :team="team"
+                :available-roles="availableRoles"
+                :user-permissions="permissions"
+            />
 
-                <template v-if="permissions.canDeleteTeam && ! team.personal_team">
-                    <SectionBorder />
+            <template v-if="permissions.canDeleteTeam && ! team.personal_team">
+                <SectionBorder />
 
-                    <DeleteTeamForm class="mt-10 sm:mt-0" :team="team" />
-                </template>
-            </div>
+                <DeleteTeamForm class="mt-10 sm:mt-0" :team="team" />
+            </template>
         </div>
-    </PageContainer>
+    </div>
 </template>