QuickLink.razor

@namespace LumexUI.Docs.Client.Components

@using LumexUI.Shared.Icons

<li class="relative flex flex-col items-start p-1">
    <div class="peer flex items-end gap-3 mb-3">
        <div class="flex items-center justify-center size-8 rounded-xl bg-indigo-50/75 text-indigo-500 border border-indigo-300 ring-2 ring-indigo-100">
            <DynamicIcon Type="@Icon" Size="20" />
        </div>
        <h3 class="font-semibold text-foreground-900">
            <LumexLink Href="@Link"
                       Color="@ThemeColor.None"
                       Class="before:absolute before:-inset-3 before:rounded-2xl">
                @Title
            </LumexLink>
        </h3>
    </div>
    <div>
        <p class="text-sm text-foreground-500 leading-6">
            @Description
        </p>
    </div>
    <div class="absolute -z-10 -inset-3 rounded-2xl bg-gray-50 peer-hover:ring peer-hover:ring-foreground-900/10"></div>
</li>

@code {
    [Parameter] public Type? Icon { get; set; }
    [Parameter] public string? Link { get; set; }
    [Parameter] public string? Title { get; set; }
    [Parameter] public string? Description { get; set; }
}