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.
@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 );
}