TaikoLocalServer/TaikoWebUI/Pages/Dashboard.razor

@using SharedProject.Models.Responses
@inject HttpClient Client
@inject NavigationManager UriHelper

@page "/Dashboard"

<h1>Dashboard</h1>

<MudGrid Class="my-8">
@if (response is null)
{
    @if (isLoading is true) {
            @for (uint i = 0; i < 3; i++) {
                <MudItem xs="12" md="6" lg="4">
                    <MudCard Outlined="true">
                        <MudCardContent>
                            <MudSkeleton Width="30%" Height="42px;" Class="mb-5" />
                            <MudSkeleton Width="80%" />
                            <MudSkeleton Width="100%" />
                        </MudCardContent>
                        <MudCardActions>
                            <MudStack Row="true" Style="width:100%" Spacing="4" Justify="Justify.FlexEnd">
                                <MudSkeleton Width="64px" Height="40px" />
                                <MudSkeleton Width="64px" Height="40px" />
                            </MudStack>
                        </MudCardActions>
                    </MudCard>
                </MudItem>
            }
    } else {
        <MudItem xs="12">
            <MudText Align="Align.Center" Class="my-8">
                No data.
            </MudText>
        </MudItem>
    }
}
else
{
    @foreach (var user in response.Users)
    {
        <MudItem xs="12" md="6" lg="4">
            <MudCard Outlined="true">
                <MudCardHeader>
                    <CardHeaderContent>
                        <MudText Typo="Typo.h6" Style="font-weight:bold">@user.Baid</MudText>
                    </CardHeaderContent>
                </MudCardHeader>
                <MudCardContent>
                    <MudText Style="font-weight:bold">Access Code</MudText>
                    <MudText Style="font-family:monospace">@user.AccessCode</MudText>
                </MudCardContent>
                <MudCardActions>
                    <MudStack Row="true" Style="width:100%" Spacing="4" Justify="Justify.FlexEnd">
                        <MudButton Size="Size.Small" Variant="Variant.Text" StartIcon="@Icons.Material.Filled.Delete" Color="Color.Error">Delete</MudButton>
                        <MudButton OnClick="() => NavigateToProfile(user.Baid)" Size="Size.Small" Variant="Variant.Text" StartIcon="@Icons.Material.Filled.Edit" Color="Color.Primary">Edit</MudButton>
                    </MudStack>
                </MudCardActions>
            </MudCard>
        </MudItem>
    }
}
</MudGrid>

@code {
    private DashboardResponse? response;
    private bool isLoading = true;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        response = await Client.GetFromJsonAsync<DashboardResponse>("api/Dashboard");

        isLoading = false;
    }


    private void NavigateToProfile(uint baid)
    {
        UriHelper.NavigateTo($"/Card/{baid}");
    }
}