UI/Components/Menu/MenuKeyBindings.razor

A Razor UI component for displaying key bindings in the menu. It iterates over a list of Binding objects and renders rows showing the action name and one or more key tokens, inserting a plus sign between multiple keys.

Native Interop
@namespace Sunless.Libraries.UI
@using System.Collections.Generic
@using Sandbox
@using Sandbox.UI
@inherits Panel
@attribute [StyleSheet]

<root class="menu-key-bindings">
	@if ( Bindings is { Count: > 0 } )
	{
		foreach ( var entry in Bindings )
		{
			<div class="binding-row">
				<div class="binding-action">@entry.Action</div>
				<div class="binding-keys">
					@if ( entry.Keys is not null )
					{
						for ( int i = 0; i < entry.Keys.Length; i++ )
						{
							if ( i > 0 )
							{
								<div class="binding-plus">+</div>
							}
							<div class="kbd">@entry.Keys[i]</div>
						}
					}
				</div>
			</div>
		}
	}
</root>

@code
{
	public IReadOnlyList<MenuKeyBindingsWidget.Binding> Bindings { get; set; }

	protected override int BuildHash() => HashCode.Combine( Bindings?.Count ?? 0 );
}