aliasvault/apps/server/Shared/AliasVault.RazorComponents/Paginator.razor

@if (TotalRecords > PageSize)
{
    <!-- Navigation component for pagination -->
    <nav aria-label="Page navigation" class="mt-4 flex justify-end mb-5">
        <ul class="flex space-x-2">
            <!-- First page button -->
            <li class="@(CurrentPage == 1 ? "opacity-50 cursor-not-allowed" : "")">
                <a class="px-3 py-2 bg-primary-100 text-primary-700 border border-primary-300 rounded hover:bg-primary-200 transition duration-300 shadow-sm" href="javascript:void(0)" @onclick="() => SetPage(1)">First</a>
            </li>
            <!-- Previous page button -->
            <li class="@(CurrentPage == 1 ? "opacity-50 cursor-not-allowed" : "")">
                <a class="px-3 py-2 bg-primary-100 text-primary-700 border border-primary-300 rounded hover:bg-primary-200 transition duration-300 shadow-sm" href="javascript:void(0)" @onclick="() => ChangePage(-1)">Previous</a>
            </li>
            @for (var i = 1; i <= PageCount; i++)
            {
                var pageNum = i;
                if (i > 2 && i < PageCount - 2 && Math.Abs(CurrentPage - i) > 3)
                {
                    // Don't render intermediate pages when there are many pages
                    continue;
                }
                <!-- Individual page number buttons -->
                <li>
                    <a class="px-3 py-2 @(CurrentPage == pageNum ? "bg-primary-600 text-white" : "bg-primary-100 text-primary-700") border border-primary-300 rounded hover:bg-primary-200 transition duration-300 shadow-sm" href="javascript:void(0)" @onclick="() => SetPage(pageNum)">@pageNum</a>
                </li>
            }
            <!-- Next page button -->
            <li class="@(CurrentPage == PageCount ? "opacity-50 cursor-not-allowed" : "")">
                <a class="px-3 py-2 bg-primary-100 text-primary-700 border border-primary-300 rounded hover:bg-primary-200 transition duration-300 shadow-sm" href="javascript:void(0)" @onclick="() => ChangePage(1)">Next</a>
            </li>
            <!-- Last page button -->
            <li class="@(CurrentPage == PageCount ? "opacity-50 cursor-not-allowed" : "")">
                <a class="px-3 py-2 bg-primary-100 text-primary-700 border border-primary-300 rounded hover:bg-primary-200 transition duration-300 shadow-sm" href="javascript:void(0)" @onclick="() => SetPage(PageCount)">Last</a>
            </li>
        </ul>
    </nav>
}

@code {
    /// <summary>
    /// The current page number.
    /// </summary>
    [Parameter] public int CurrentPage { get; set; } = 1;

    /// <summary>
    /// The number of items to display per page.
    /// </summary>
    [Parameter] public int PageSize { get; set; } = 10;

    /// <summary>
    /// The total number of records in the dataset.
    /// </summary>
    [Parameter] public int TotalRecords { get; set; }

    /// <summary>
    /// Event callback triggered when the page is changed.
    /// </summary>
    [Parameter] public EventCallback<int> OnPageChanged { get; set; }

    /// <summary>
    /// Calculates the total number of pages based on TotalRecords and PageSize.
    /// </summary>
    private int PageCount => (TotalRecords + PageSize - 1) / PageSize;

    /// <summary>
    /// Changes the current page by the specified amount.
    /// </summary>
    /// <param name="change">The number of pages to change by (positive or negative).</param>
    private void ChangePage(int change)
    {
        SetPage(CurrentPage + change);
    }

    /// <summary>
    /// Sets the current page to the specified page number.
    /// </summary>
    /// <param name="pageNumber">The page number to set.</param>
    private void SetPage(int pageNumber)
    {
        if (pageNumber < 1)
        {
            CurrentPage = 1;
        }
        else if (pageNumber > PageCount)
        {
            CurrentPage = PageCount;
        }
        else
        {
            CurrentPage = pageNumber;
        }

        OnPageChanged.InvokeAsync(CurrentPage);
    }
}