@page "/components/dropdown-menu"

<PageTitle>Dropdown Menu — Lumeo</PageTitle>

<PageHeader Title="Dropdown Menu" Description="Displays a menu of actions or options triggered by a button." />

<div class="mt-10 space-y-3">
    <Heading Id="when-to-use" Level="2" Class="scroll-mt-20">When to Use</Heading>
    <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
        <li>Provide a list of actions behind a trigger button (e.g., "More options" or kebab menu)</li>
        <li>Group context-specific actions such as edit, delete, duplicate, or share</li>
        <li>Build settings menus with checkbox or radio items for toggles and selections</li>
        <li>Organize file or toolbar operations into labeled groups with separators</li>
        <li>Replace inline buttons when space is limited and actions are secondary</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <DropdownMenu>
            <DropdownMenuTrigger data-testid="dropdown-open-trigger">
                <Button Variant="Button.ButtonVariant.Outline">
                    Open
                    <DynamicIcon Name="ChevronDown" Class="ml-2 h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-180" />
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent>
                <DropdownMenuLabel>My Account</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem>Profile</DropdownMenuItem>
                <DropdownMenuItem>Settings</DropdownMenuItem>
                <DropdownMenuItem>Billing</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>Log out</DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    </ComponentDemo>

    <ComponentDemo Title="With Groups" Code="@_groupCode">
        <DropdownMenu>
            <DropdownMenuTrigger>
                <Button Variant="Button.ButtonVariant.Outline">
                    Actions
                    <DynamicIcon Name="ChevronDown" Class="ml-2 h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-180" />
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent>
                <DropdownMenuLabel>File</DropdownMenuLabel>
                <DropdownMenuGroup>
                    <DropdownMenuItem>New File</DropdownMenuItem>
                    <DropdownMenuItem>Open File</DropdownMenuItem>
                    <DropdownMenuItem>Save</DropdownMenuItem>
                </DropdownMenuGroup>
                <DropdownMenuSeparator />
                <DropdownMenuLabel>Edit</DropdownMenuLabel>
                <DropdownMenuGroup>
                    <DropdownMenuItem>Undo</DropdownMenuItem>
                    <DropdownMenuItem>Redo</DropdownMenuItem>
                </DropdownMenuGroup>
                <DropdownMenuSeparator />
                <DropdownMenuItem Disabled="true">Delete</DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    </ComponentDemo>

    <ComponentDemo Title="With Arrow" Code="@_dropdownArrowCode">
        <DropdownMenu>
            <DropdownMenuTrigger>
                <Button Variant="Button.ButtonVariant.Outline">Actions <DynamicIcon Name="ChevronDown" Class="h-4 w-4 ml-1 transition-transform duration-200 group-data-[state=open]:rotate-180" /></Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent ShowArrow="true">
                <DropdownMenuItem>Edit</DropdownMenuItem>
                <DropdownMenuItem>Duplicate</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>Archive</DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    </ComponentDemo>

    <ComponentDemo Title="Alignment" Code="@_alignCode">
        <Flex Gap="4">
            <DropdownMenu>
                <DropdownMenuTrigger>
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm">Start</Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent Align="DropdownMenuContent.DropdownMenuAlign.Start">
                    <DropdownMenuItem>Option 1</DropdownMenuItem>
                    <DropdownMenuItem>Option 2</DropdownMenuItem>
                    <DropdownMenuItem>Option 3</DropdownMenuItem>
                </DropdownMenuContent>
            </DropdownMenu>
            <DropdownMenu>
                <DropdownMenuTrigger>
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm">End</Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent Align="DropdownMenuContent.DropdownMenuAlign.End">
                    <DropdownMenuItem>Option 1</DropdownMenuItem>
                    <DropdownMenuItem>Option 2</DropdownMenuItem>
                    <DropdownMenuItem>Option 3</DropdownMenuItem>
                </DropdownMenuContent>
            </DropdownMenu>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Checkbox Items" Code="@_checkboxCode">
        <DropdownMenu>
            <DropdownMenuTrigger>
                <Button Variant="Button.ButtonVariant.Outline">
                    View Options <DynamicIcon Name="ChevronDown" Class="h-4 w-4 ml-1 transition-transform duration-200 group-data-[state=open]:rotate-180" />
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent>
                <DropdownMenuLabel>Toggle Columns</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuCheckboxItem @bind-Checked="_showName">Name</DropdownMenuCheckboxItem>
                <DropdownMenuCheckboxItem @bind-Checked="_showEmail">Email</DropdownMenuCheckboxItem>
                <DropdownMenuCheckboxItem @bind-Checked="_showRole">Role</DropdownMenuCheckboxItem>
            </DropdownMenuContent>
        </DropdownMenu>
    </ComponentDemo>

    <ComponentDemo Title="Radio Items" Code="@_radioCode">
        <DropdownMenu>
            <DropdownMenuTrigger>
                <Button Variant="Button.ButtonVariant.Outline">
                    Sort By <DynamicIcon Name="ChevronDown" Class="h-4 w-4 ml-1 transition-transform duration-200 group-data-[state=open]:rotate-180" />
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent>
                <DropdownMenuLabel>Sort Order</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuRadioGroup @bind-Value="_sortBy">
                    <DropdownMenuRadioItem Value="name">Name</DropdownMenuRadioItem>
                    <DropdownMenuRadioItem Value="date">Date</DropdownMenuRadioItem>
                    <DropdownMenuRadioItem Value="size">Size</DropdownMenuRadioItem>
                </DropdownMenuRadioGroup>
            </DropdownMenuContent>
        </DropdownMenu>
    </ComponentDemo>
</Stack>

<Alert Variant="Alert.AlertVariant.Info" ShowIcon="true" Class="mt-6">
    <strong>Mobile (rc.49).</strong> Dropdown menu items now have a minimum 44×44 px touch target so they are reliably tappable on phones without precise stylus-level accuracy.
</Alert>

<div class="mt-12">
    <Heading Id="keyboard-interactions" Level="2" Class="scroll-mt-20">Keyboard Interactions</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Key</TableHead>
                    <TableHead>Action</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell><Kbd>Enter</Kbd></TableCell><TableCell>Open the menu when the trigger is focused, or activate the highlighted item</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Space</Kbd></TableCell><TableCell>Open the menu or toggle a checkbox/radio item</TableCell></TableRow>
                <TableRow><TableCell><Kbd>ArrowDown</Kbd></TableCell><TableCell>Move highlight to the next menu item</TableCell></TableRow>
                <TableRow><TableCell><Kbd>ArrowUp</Kbd></TableCell><TableCell>Move highlight to the previous menu item</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Escape</Kbd></TableCell><TableCell>Close the menu and return focus to the trigger</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Home</Kbd></TableCell><TableCell>Move highlight to the first menu item</TableCell></TableRow>
                <TableRow><TableCell><Kbd>End</Kbd></TableCell><TableCell>Move highlight to the last menu item</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>

    <Stack Gap="8" Class="mt-8">
        <Stack>
            <Heading Level="3" Class="mb-3">DropdownMenu</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Open</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Controls whether the menu is open. Use with @@bind-Open for two-way binding.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OpenChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;bool&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Callback invoked when the open state changes.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsOpen</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Obsolete alias for <code class="rounded bg-muted px-1 py-0.5 text-xs font-mono">Open</code>. Use Open instead.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsOpenChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;bool&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Obsolete alias for <code class="rounded bg-muted px-1 py-0.5 text-xs font-mono">OpenChanged</code>. Use OpenChanged instead.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">DropdownMenuItem</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OnClick</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Callback invoked when this menu item is clicked. Also automatically closes the menu.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Disabled</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">When true, the menu item is non-interactive and shown with reduced opacity.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">DropdownMenuCheckboxItem</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Checked</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Whether the item is checked. Use with @@bind-Checked for two-way binding.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">CheckedChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;bool&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Callback invoked when the checked state changes.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">DropdownMenuRadioGroup / DropdownMenuRadioItem</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Value (RadioGroup)</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">The currently selected radio value. Use with @@bind-Value.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Value (RadioItem)</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">""</td>
                            <td class="p-3 text-muted-foreground">The value this radio item represents when selected.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">DropdownMenuTrigger / DropdownMenuContent / DropdownMenuLabel / DropdownMenuGroup / DropdownMenuSeparator</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr><td class="p-3 font-mono text-xs text-primary">Align</td><td class="p-3 font-mono text-xs text-muted-foreground">DropdownMenuAlign</td><td class="p-3 font-mono text-xs text-muted-foreground">Start</td><td class="p-3 text-muted-foreground">DropdownMenuContent — horizontal alignment relative to the trigger. Values: Start, Center, End.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Side</td><td class="p-3 font-mono text-xs text-muted-foreground">DropdownMenuSide</td><td class="p-3 font-mono text-xs text-muted-foreground">Bottom</td><td class="p-3 text-muted-foreground">DropdownMenuContent — preferred side for placement. Values: Top, Right, Bottom, Left.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ShowArrow</td><td class="p-3 font-mono text-xs text-muted-foreground">bool</td><td class="p-3 font-mono text-xs text-muted-foreground">false</td><td class="p-3 text-muted-foreground">DropdownMenuContent — renders a small arrow pointing at the trigger.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">AriaLabel</td><td class="p-3 font-mono text-xs text-muted-foreground">string?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">DropdownMenuGroup — accessible name for the group.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Value</td><td class="p-3 font-mono text-xs text-muted-foreground">string?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">DropdownMenuRadioGroup — currently selected value. Use with @@bind-Value.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ValueChanged</td><td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;string&gt;</td><td class="p-3 font-mono text-xs text-muted-foreground">—</td><td class="p-3 text-muted-foreground">DropdownMenuRadioGroup — two-way binding callback.</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

<div class="mt-12">
    <Heading Id="related" Level="2" Class="scroll-mt-20">Related Components</Heading>
    <ul class="mt-4 space-y-2 text-sm">
        <li><a href="/components/context-menu" class="text-primary hover:underline">ContextMenu</a> — Use for right-click context menus instead of button-triggered dropdowns</li>
        <li><a href="/components/menubar" class="text-primary hover:underline">Menubar</a> — Use for horizontal menu bars with multiple dropdown sections</li>
        <li><a href="/components/select" class="text-primary hover:underline">Select</a> — Use when the user needs to choose a single value from a list for a form field</li>
        <li><a href="/components/popover" class="text-primary hover:underline">Popover</a> — Use for rich custom content overlays beyond simple menu items</li>
    </ul>
</div>

@code {
    private string _defaultCode = @"<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Open</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Settings</DropdownMenuItem>
        <DropdownMenuItem>Billing</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Log out</DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>";

    private string _groupCode = @"<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Actions</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
        <DropdownMenuLabel>File</DropdownMenuLabel>
        <DropdownMenuGroup>
            <DropdownMenuItem>New File</DropdownMenuItem>
            <DropdownMenuItem>Open File</DropdownMenuItem>
            <DropdownMenuItem>Save</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuLabel>Edit</DropdownMenuLabel>
        <DropdownMenuGroup>
            <DropdownMenuItem>Undo</DropdownMenuItem>
            <DropdownMenuItem>Redo</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem Disabled=""true"">Delete</DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>";

    private string _dropdownArrowCode = @"<DropdownMenu>
    <DropdownMenuTrigger><Button Variant=""Button.ButtonVariant.Outline"">Actions</Button></DropdownMenuTrigger>
    <DropdownMenuContent ShowArrow=""true"">
        <DropdownMenuItem>Edit</DropdownMenuItem>
        <DropdownMenuItem>Duplicate</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Archive</DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>";

    private string _alignCode = @"<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Start</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent Align=""DropdownMenuContent.DropdownMenuAlign.Start"">
        <DropdownMenuItem>Option 1</DropdownMenuItem>
        <DropdownMenuItem>Option 2</DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">End</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent Align=""DropdownMenuContent.DropdownMenuAlign.End"">
        <DropdownMenuItem>Option 1</DropdownMenuItem>
        <DropdownMenuItem>Option 2</DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>";

    private bool _showName = true;
    private bool _showEmail = true;
    private bool _showRole = true;
    private string _sortBy = "name";

    private string _checkboxCode = @"<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">
            View Options <Blazicon Svg=""Lucide.ChevronDown"" class=""h-4 w-4 ml-1"" />
        </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
        <DropdownMenuLabel>Toggle Columns</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem @bind-Checked=""_showName"">Name</DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem @bind-Checked=""_showEmail"">Email</DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem @bind-Checked=""_showRole"">Role</DropdownMenuCheckboxItem>
    </DropdownMenuContent>
</DropdownMenu>

@code {
    private bool _showName = true;
    private bool _showEmail = true;
    private bool _showRole = true;
}";

    private string _radioCode = @"<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">
            Sort By <Blazicon Svg=""Lucide.ChevronDown"" class=""h-4 w-4 ml-1"" />
        </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
        <DropdownMenuLabel>Sort Order</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuRadioGroup @bind-Value=""_sortBy"">
            <DropdownMenuRadioItem Value=""name"">Name</DropdownMenuRadioItem>
            <DropdownMenuRadioItem Value=""date"">Date</DropdownMenuRadioItem>
            <DropdownMenuRadioItem Value=""size"">Size</DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
    </DropdownMenuContent>
</DropdownMenu>

@code {
    private string _sortBy = ""name"";
}";
}
