DocsApiSection.razor

@namespace LumexUI.Docs.Client.Components
@inject NavigationManager NavigationManager

<DocsSection Title="API">
    <p>
        See the API references below for a complete guide to all the
        parameters available for the components mentioned here.
    </p>
    <ul>
        @foreach( var component in Components )
        {
            var componentPathSegment = component.Replace( "Lumex", "" ).SplitPascalCase().ToKebabCase();

            <li>
                <LumexChip Size="@Size.Small"
                           Radius="@Radius.Small"
                           Variant="@ChipVariant.Flat"
                           Class="not-prose bg-default-50 ring ring-default-900/10">
                    <LumexLink Href="@($"{NavigationManager.BaseUri}docs/api/{componentPathSegment}")"
                               Class="font-mono text-orange-600 dark:text-orange-400">
                        @($"<{component} />")
                    </LumexLink>
                </LumexChip>
            </li>
        }

        @* <span class="px-1 py-0.5 rounded-md ring ring-orange-200 bg-default-50">
            @($"<{component} />")
        </span> *@
    </ul>
</DocsSection>

@code {
    [Parameter, EditorRequired] public string[] Components { get; set; } = default!;
}