NavItemBadge.razor

@namespace LumexUI.Docs.Client.Components

@if( Status.HasValue )
{
    <span class="@RootClasses">
        @Status.ToString()
    </span>
}

@code {
    [Parameter] public PageStatus? Status { get; set; }

    private string? RootClasses => ElementClass.Empty()
        .Add( "px-1.5" )
        .Add( "py-[3px]" )
        .Add( "rounded-full" )
        .Add( "ring" )
        .Add( "font-semibold" )
        .Add( "text-[9px]" )
        .Add( "uppercase" )
        .Add( "leading-none" )
        .Add( _variants[Status!.Value], when: Status.HasValue )
        .ToString();

    private static readonly Dictionary<PageStatus, string> _variants = new()
    {
        [PageStatus.New] = "bg-orange-100 ring-orange-300 text-orange-600",
        [PageStatus.Soon] = "bg-foreground-100 ring-foreground-300 text-foreground-600",
        [PageStatus.Preview] = "bg-indigo-50 ring-indigo-200 text-indigo-600",
        [PageStatus.Updated] = "bg-teal-50 ring-teal-200 text-teal-600",
    };
}