RackPeek/Shared.Rcl/Components/CrumbLevel.razor

<div class="flex flex-col justify-center">
    @if (Items is null || Items.Count == 0)
    {
    }
    else if (Items.Count == 1)
    {
        <div class="flex items-center h-full">
            <a class="hover:text-white transition-colors flex items-center gap-1"
               href="@Items[0].Href">
                <span>@Items[0].Label</span>
                <span class="text-xxs text-zinc-400">
                    (@Items[0].Kind.ToLower())
                </span>
            </a>
        </div>
    }
    else
    {
        <div class="flex flex-col gap-0.5">
            @for (var i = 0; i < Items.Count; i++)
            {
                var crumb = Items[i];
                var isLast = i == Items.Count - 1;

                <div class="flex items-center gap-1">
                    <span class="text-zinc-600 select-none">
                        @(isLast ? "└─" : "├─")
                    </span>

                    <a class="hover:text-white transition-colors flex items-center gap-1"
                       href="@crumb.Href">
                        <span>@crumb.Label</span>
                        <span class="text-xs text-zinc-400">
                            (@crumb.Kind)
                        </span>
                    </a>
                </div>
            }
        </div>
    }
</div>

@code {
    [Parameter] [EditorRequired] public List<ResourceBreadCrumbComponent.Breadcrumb> Items { get; set; } = new();
}