<div class="w-full max-w-60 px-1 py-2 border border-default-200 rounded-small">
    <LumexListbox TValue="string" Variant="@ListboxVariant.Flat">
        <LumexListboxItem StartContent="@_newFile">New file</LumexListboxItem>
        <LumexListboxItem StartContent="@_editFile">Edit file</LumexListboxItem>
        <LumexListboxItem StartContent="@_shareFile">Share file</LumexListboxItem>
        <LumexListboxItem Color="@ThemeColor.Danger"
                          StartContent="@_deleteFile"
                          Class="text-danger">
            Delete file
        </LumexListboxItem>
    </LumexListbox>
</div>

@code {
    private RenderFragment _newFile =
        @<LumexIcon Icon="@Icons.Rounded.LibraryAdd"
                    Size="@new("20")"
                    Class="text-default-500 shrink-0" />;

    private RenderFragment _editFile =
        @<LumexIcon Icon="@Icons.Rounded.EditSquare"
                    Size="@new("20")"
                    Class="text-default-500 shrink-0" />;

    private RenderFragment _shareFile =
        @<LumexIcon Icon="@Icons.Rounded.Share"
                    Size="@new("20")"
                    Class="text-default-500 shrink-0" />;

    private RenderFragment _deleteFile =
        @<LumexIcon Icon="@Icons.Rounded.Delete"
                    Size="@new("20")"
                    Class="shrink-0" />;
}
