PageHeader component introduced.

WebApp/Components/Features/Events/Index.razor

@@ -2,16 +2,17 @@
 @attribute [Authorize]
 @using Microsoft.EntityFrameworkCore
 @using WebApp.Models
+@using WebApp.Components.Shared.Components
 @inject AppDbContext Context
 @inject IDialogService DialogService
 @inject ISnackbar Snackbar
 
-<PageTitle>Events - TSA Chapter Organizer</PageTitle>
+<PageHeader Title="Events">
-
+    <ActionButtons>
-<MudText Typo="Typo.h3">Events</MudText>
+        <MudButton StartIcon="@Icons.Material.Filled.Create" Href="events/create" Variant="Variant.Filled" Color="Color.Primary">Create New</MudButton>
-
+        <MudButton StartIcon="@Icons.Material.Filled.Print" Href="events/printout" Variant="Variant.Outlined">Printable Descriptions</MudButton>
-<MudButton StartIcon="@Icons.Material.Filled.Create" Href="events/create">Create New</MudButton>
+    </ActionButtons>
-<MudButton StartIcon="@Icons.Material.Filled.Print" Href="events/printout">Printable Descriptions</MudButton>
+</PageHeader>
 
 <MudDataGrid T="EventDefinition" ServerData="ServerReload" @ref="_dataGrid" Filterable="true" RowsPerPage="50" >
     <Columns>

WebApp/Components/Features/Students/Index.razor

@@ -2,17 +2,18 @@
 @attribute [Authorize]
 @using Microsoft.EntityFrameworkCore
 @using WebApp.Models
+@using WebApp.Components.Shared.Components
 @inject AppDbContext Context
 @inject IDialogService DialogService
 @inject ISnackbar Snackbar
 
-<PageTitle>Students - TSA Chapter Organizer</PageTitle>
+<PageHeader Title="Students">
-
+    <ActionButtons>
-<MudText Typo="Typo.h3">Students</MudText>
+        <MudButton StartIcon="@Icons.Material.Filled.Create" Href="students/create" Variant="Variant.Filled" Color="Color.Primary">Create New</MudButton>
-
+        <MudButton StartIcon="@AppIcons.EventRank" Href="students/event-ranking" Variant="Variant.Outlined">Event Rankings</MudButton>
-<MudButton StartIcon="@Icons.Material.Filled.Create" Href="students/create">Create New</MudButton>
+        <MudButton StartIcon="@Icons.Material.Filled.AppRegistration" Href="students/teams" Variant="Variant.Outlined">Registration</MudButton>
-<MudButton StartIcon="@AppIcons.EventRank" Href="students/event-ranking">Event Rankings</MudButton>
+    </ActionButtons>
-<MudButton StartIcon="@Icons.Material.Filled.AppRegistration" Href="students/teams">Registration</MudButton>
+</PageHeader>
 
 <MudDataGrid T="Student" ServerData="ServerReload" @ref="_dataGrid" Filterable="true" RowsPerPage="25">
     <Columns>

WebApp/Components/Features/Teams/Index.razor

@@ -1,18 +1,18 @@
 @using Microsoft.EntityFrameworkCore
+@using WebApp.Components.Shared.Components
 @page "/teams"
 @attribute [Authorize]
 @inject AppDbContext Context
 @inject IDialogService DialogService
 @inject ISnackbar Snackbar
 
-<PageTitle>TimeSlots</PageTitle>
+<PageHeader Title="Teams">
-
+    <ActionButtons>
-<MudText Typo="Typo.h3">Teams</MudText>
+        <MudButton StartIcon="@Icons.Material.Filled.Create" Href="teams/create" Variant="Variant.Filled" Color="Color.Primary">Create New</MudButton>
-
+        <MudButton StartIcon="@Icons.Material.Filled.Assignment" Href="teams/assignment" Variant="Variant.Outlined">Assignment</MudButton>
-<MudButton StartIcon="@Icons.Material.Filled.Create" Href="teams/create">Create New</MudButton>
+        <MudButton StartIcon="@Icons.Material.Filled.Print" Href="teams/printout" Variant="Variant.Outlined">Printout</MudButton>
-<MudButton StartIcon="@Icons.Material.Filled.Assignment" Href="teams/assignment">Assignment</MudButton>
+    </ActionButtons>
-<MudButton StartIcon="@Icons.Material.Filled.Print" Href="teams/printout">Printout</MudButton>
+</PageHeader>
-
 
 <MudDataGrid T="Team" ServerData="ServerReload" @ref="_dataGrid" Filterable="true" RowsPerPage="35">
     <Columns>

WebApp/Components/Shared/Components/PageHeader.razor

@@ -0,0 +1,126 @@
+@namespace WebApp.Components.Shared.Components
+@using MudBlazor
+
+<PageTitle>@GetPageTitle()</PageTitle>
+
+<div class="page-header">
+    <MudStack Spacing="2">
+        @* Breadcrumbs *@
+        @if (BreadcrumbItems != null && BreadcrumbItems.Any())
+        {
+            <MudBreadcrumbs Items="@BreadcrumbItems"></MudBreadcrumbs>
+        }
+
+        @* Title Row with Back Button and Actions *@
+        <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center" Spacing="2">
+            <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
+                @* Back Button *@
+                @if (ShowBackButton && !string.IsNullOrEmpty(BackButtonUrl))
+                {
+                    <MudIconButton Icon="@Icons.Material.Filled.ArrowBack"
+                                   Href="@BackButtonUrl"
+                                   Size="Size.Large"
+                                   Color="Color.Default" />
+                }
+
+                @* Icon *@
+                @if (!string.IsNullOrEmpty(Icon))
+                {
+                    <MudIcon Icon="@Icon" Size="Size.Large" />
+                }
+
+                @* Title *@
+                <MudText Typo="Typo.h3">
+                    @Title
+                    @if (TitleSuffix != null)
+                    {
+                        @TitleSuffix
+                    }
+                </MudText>
+            </MudStack>
+
+            @* Action Buttons *@
+            @if (ActionButtons != null)
+            {
+                <div class="page-header-actions">
+                    @ActionButtons
+                </div>
+            }
+        </MudStack>
+
+        @* Subtitle *@
+        @if (!string.IsNullOrEmpty(Subtitle))
+        {
+            <MudText Typo="Typo.h4">@Subtitle</MudText>
+        }
+
+        @* Description *@
+        @if (!string.IsNullOrEmpty(Description))
+        {
+            <MudText Typo="Typo.body2" Color="Color.Secondary">@Description</MudText>
+        }
+
+        @* Custom Header Content *@
+        @if (HeaderContent != null)
+        {
+            @HeaderContent
+        }
+
+        @* Divider *@
+        @if (ShowDivider)
+        {
+            <MudDivider />
+        }
+    </MudStack>
+</div>
+
+@code {
+    // Required
+    [Parameter]
+    public string Title { get; set; } = string.Empty;
+
+    // Optional - Basic
+    [Parameter]
+    public string? Subtitle { get; set; }
+
+    [Parameter]
+    public string? Description { get; set; }
+
+    [Parameter]
+    public string? Icon { get; set; }
+
+    [Parameter]
+    public bool ShowDivider { get; set; } = true;
+
+    // Optional - Navigation
+    [Parameter]
+    public List<BreadcrumbItem>? BreadcrumbItems { get; set; }
+
+    [Parameter]
+    public bool ShowBackButton { get; set; } = false;
+
+    [Parameter]
+    public string? BackButtonUrl { get; set; }
+
+    // Optional - Actions
+    [Parameter]
+    public RenderFragment? ActionButtons { get; set; }
+
+    // Optional - Advanced
+    [Parameter]
+    public RenderFragment? TitleSuffix { get; set; }
+
+    [Parameter]
+    public RenderFragment? HeaderContent { get; set; }
+
+    private string GetPageTitle()
+    {
+        var baseTitle = Title;
+        if (!string.IsNullOrEmpty(Subtitle))
+        {
+            baseTitle = $"{Title} {Subtitle}";
+        }
+
+        return $"{baseTitle} - TSA Chapter Organizer";
+    }
+}

WebApp/wwwroot/app.css

@@ -109,4 +109,13 @@ h1:focus {
 .pre-wrap-text {
     white-space: pre-wrap;
 }
+
+.page-header {
+    margin-bottom: 1.5rem;
+}
+
+.page-header-actions {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
 }