NotificationsInteractiveIconDisplay.razor

@using Fluxor.Blazor.Web.Components;
@inherits FluxorComponent

@{
	var notificationState = NotificationStateWrap.Value;
	var iconBadgeIsActive = notificationState.DefaultList.Count > 0;
	var showIconBadgeCssClassString = iconBadgeIsActive ? "luth_active" : "";
}

<button class="luth_button luth_web_notifications-interactive-icon @CssClassString"
		id="@_buttonElementId"
        style="@CssStyleString"
		title="Notification count: @notificationState.DefaultList.Count"
        @onclick="ShowNotificationsViewDisplayOnClick">

    @* TODO: The icons are annoying because they are an integer value. Might need to make them more responsive. This is the <IconBell/> (2023-09-09) *@
    @* The: "calc(0.85em + 4px + 0.7em)" comes from the bottom panel height. I modified it slightly to allow the icon to fit. *@
    <svg width="calc(0.85em + 1px + 0.7em)" height="calc(0.85em + 1px + 0.7em)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M13.377 10.573a7.63 7.63 0 0 1-.383-2.38V6.195a5.115 5.115 0 0 0-1.268-3.446 5.138 5.138 0 0 0-3.242-1.722c-.694-.072-1.4 0-2.07.227-.67.215-1.28.574-1.794 1.053a4.923 4.923 0 0 0-1.208 1.675 5.067 5.067 0 0 0-.431 2.022v2.2a7.61 7.61 0 0 1-.383 2.37L2 12.343l.479.658h3.505c0 .526.215 1.04.586 1.412.37.37.885.586 1.412.586.526 0 1.04-.215 1.411-.586s.587-.886.587-1.412h3.505l.478-.658-.586-1.77zm-4.69 3.147a.997.997 0 0 1-.705.299.997.997 0 0 1-.706-.3.997.997 0 0 1-.3-.705h1.999a.939.939 0 0 1-.287.706zm-5.515-1.71l.371-1.114a8.633 8.633 0 0 0 .443-2.691V6.004c0-.563.12-1.113.347-1.616.227-.514.55-.969.969-1.34.419-.382.91-.67 1.436-.837.538-.18 1.1-.24 1.65-.18a4.147 4.147 0 0 1 2.597 1.4 4.133 4.133 0 0 1 1.004 2.776v2.01c0 .909.144 1.818.443 2.691l.371 1.113h-9.63v-.012z" /></svg>

    <IconBadgeDisplay CssClassString="@showIconBadgeCssClassString">
		@if (iconBadgeIsActive)
		{
			if (notificationState.DefaultList.Count > 9)
	        {
	            @: 9+
	        }
	        else
	        {
	            @: @notificationState.DefaultList.Count
	        }
		}
    </IconBadgeDisplay>
</button>