CloudMusic/FNZCM/FNZCM.BlazorWasm/UI/Views/Browse/DiscCard.razor

@code {
    [Parameter, Required] public FeDisc[] Discs { get; set; }
    [Parameter] public EventCallback<FeDisc> OnClick { get; set; } = EventCallback<FeDisc>.Empty;
}

 @foreach (var disc in (Discs).KeepNoEmpty())
{
    <div class="col-md-3 d-flex align-items-stretch">
        <div class="card mb-3 shadow-sm" @onclick="()=>{ if (disc!=null) OnClick.InvokeAsync(disc); }">
            <div class="card-img-top disc-card-cover" style="background-image:url('@disc.CoverPath.UrlEscape()')">
            </div>
            <div class="card-body d-flex align-content-between flex-wrap p-2">
                <p class="card-text position-relative">
                    @disc?.Name
                    @if (disc?.Bks != null)
                    {
                        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-info">BK</span>
                    }
                </p>
                <div class="w-100">
                    <div class="w-100 text-center">
                        <small class="font-monospace text-muted">Track @disc.TrackSets.First().Tracks.Length</small>
                    </div>
                    @foreach (var tSet in (disc?.TrackSets).KeepNoEmpty())
                    {
                        <div class="d-flex justify-content-between w-100">
                            <span class="align-self-center">@(tSet?.Name.StartsWith("AAC_Q1.00") == true ? "Q1" + tSet?.Name.Substring(9) : tSet?.Name)</span>
                            <small class="text-nowrap font-monospace text-muted align-self-center">@tSet?.TotalDuration.SecondToDur() @tSet?.TotalBytes.BytesToFileSize()</small>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
}