PageHeader component introduced.

2025-12-25 20:10:06 -05:00
parent fa13039203
commit 1e36a5661b
5 changed files with 158 additions and 21 deletions
@@ -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";
+    }
+}