UI/Components/Menu/MenuMapCard.razor

A Razor UI component for a menu map card. Renders an optional background image, title, optional chip (with icon and tone), description, and an action button with an icon and click callback.

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

<root class="menu-map-card">
	@if ( !string.IsNullOrEmpty( Image ) )
	{
		<div class="map-bg" style="background-image: url(@Image)"></div>
		<div class="map-fade"></div>
	}
	<div class="map-body">
		<div class="map-section-label">Map</div>
		<div class="map-title-row">
			<div class="map-title">@Title</div>
			@if ( !string.IsNullOrEmpty( ChipLabel ) )
			{
				<div class="map-chip @ToneClass(ChipTone)">
					@if ( !string.IsNullOrEmpty( ChipIcon ) )
					{
						<Icon Name=@ChipIcon Size=@(IconSize.Small) />
					}
					<div class="map-chip-label">@ChipLabel</div>
				</div>
			}
		</div>
		@if ( !string.IsNullOrEmpty( Description ) )
		{
			<div class="map-desc">@Description</div>
		}
	</div>
	@if ( !string.IsNullOrEmpty( ActionLabel ) )
	{
		<div class="map-action" @onclick=@OnAction>
			@if ( !string.IsNullOrEmpty( ActionIcon ) )
			{
				<Icon Name=@ActionIcon Size=@(IconSize.Medium) />
			}
			<div class="map-action-label">@ActionLabel</div>
		</div>
	}
</root>

@code
{
	public string Title { get; set; }
	public string Description { get; set; }
	public string Image { get; set; }
	public string ChipLabel { get; set; }
	public string ChipIcon { get; set; }
	public MenuTone ChipTone { get; set; } = MenuTone.Confirm;
	public string ActionLabel { get; set; }
	public string ActionIcon { get; set; }
	public Action OnAction { get; set; }

	static string ToneClass( MenuTone tone ) => tone switch
	{
		MenuTone.Primary => "tone-primary",
		MenuTone.Confirm => "tone-confirm",
		MenuTone.Danger  => "tone-danger",
		MenuTone.Ghost   => "tone-ghost",
		_ => "",
	};

	protected override int BuildHash() => HashCode.Combine( Title, Description, Image, ChipLabel, ActionLabel );
}