Kbd.razor

@page "/docs/components/kbd"
@layout DocsContentLayout

@using LumexUI.Docs.Client.Pages.Components.Kbd.PreviewCodes

<DocsSection Title="Usage">
    <Usage />

    <DocsSection Title="Keys">
        <p>Use the <code>Keys</code> parameter to specify a single keyboard key or a combination of keys.</p>
        <Keys />
    </DocsSection>
</DocsSection>

<DocsSlotsSection Slots="@_slots">
    <div>
        <h4 class="font-semibold">Kbd</h4>
        <ul>
            <li><code>Class</code>: The basic CSS class name styles the wrapper of the kbd contents.</li>
            <li><code>Classes</code>: The CSS class names for the kbd slots style the entire kbd at once.</li>
        </ul>
    </div>
</DocsSlotsSection>

<DocsApiSection Components="@_apiComponents" />

@code {
    [CascadingParameter] private DocsContentLayout Layout { get; set; } = default!;

    private readonly Heading[] _headings = new Heading[]
    {
        new("Usage", [
            new("Keys")
        ]),
        new("Custom Styles"),
        new("API")
    };

    private readonly Slot[] _slots = new Slot[]
    {
        new(nameof( KbdSlots.Base ), "Kbd wrapper, it handles alignment, placement, and general appearance."),
        new(nameof( KbdSlots.Abbr ), "The keys wrapper that handles the appearance of the keys."),
        new(nameof( KbdSlots.Content ), "The children wrapper that handles the appearance of the content."),
    };

    private readonly string[] _apiComponents = new string[]
    {
        nameof( LumexKbd )
    };

    protected override void OnInitialized()
    {
        Layout.Initialize(
            title: "Keyboard Key",
            category: "Components",
            description: "Keyboard key component for displaying keyboard shortcuts and input combinations.",
            headings: _headings,
            linksProps: new ComponentLinksProps( "Kbd", isServer: true )
        );
    }
}