@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Default" Code="@_codeDropdownDefault">
    <DropdownMenu @bind-Open="_dropdown1Open">
        <DropdownMenuTrigger>
            <Button Variant="Button.ButtonVariant.Outline">Open Menu</Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
            <DropdownMenuLabel>My Account</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem>Profile</DropdownMenuItem>
            <DropdownMenuItem>Billing</DropdownMenuItem>
            <DropdownMenuItem>Settings</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem>Log out</DropdownMenuItem>
        </DropdownMenuContent>
    </DropdownMenu>
</PatternCard>

<PatternCard Label="With Icons" Code="@_codeDropdownIcons">
    <DropdownMenu @bind-Open="_dropdown2Open">
        <DropdownMenuTrigger>
            <Button Variant="Button.ButtonVariant.Outline">
                <DynamicIcon Name="Ellipsis" Class="h-4 w-4" />
            </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
            <DropdownMenuGroup>
                <DropdownMenuItem>
                    <DynamicIcon Name="User" Class="mr-2 h-4 w-4" />
                    Profile
                </DropdownMenuItem>
                <DropdownMenuItem>
                    <DynamicIcon Name="Settings" Class="mr-2 h-4 w-4" />
                    Settings
                </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
                <DynamicIcon Name="LogOut" Class="mr-2 h-4 w-4" />
                Log out
            </DropdownMenuItem>
        </DropdownMenuContent>
    </DropdownMenu>
</PatternCard>
</Stack>

@code {
    private bool _dropdown1Open;

    private bool _dropdown2Open;

        private string _codeDropdownDefault = @"<DropdownMenu @bind-Open=""_open"">
        <DropdownMenuTrigger>
            <Button Variant=""Button.ButtonVariant.Outline"">Open Menu</Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
            <DropdownMenuLabel>My Account</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem>Profile</DropdownMenuItem>
            <DropdownMenuItem>Billing</DropdownMenuItem>
            <DropdownMenuItem>Settings</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem>Log out</DropdownMenuItem>
        </DropdownMenuContent>
    </DropdownMenu>";

        private string _codeDropdownIcons = @"<DropdownMenu @bind-Open=""_open"">
        <DropdownMenuTrigger>
            <Button Variant=""Button.ButtonVariant.Outline"">
                <Blazicon Svg=""Lucide.Ellipsis"" class=""h-4 w-4"" />
            </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
            <DropdownMenuItem>
                <Blazicon Svg=""Lucide.User"" class=""mr-2 h-4 w-4"" />
                Profile
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
                <Blazicon Svg=""Lucide.LogOut"" class=""mr-2 h-4 w-4"" />
                Log out
            </DropdownMenuItem>
        </DropdownMenuContent>
    </DropdownMenu>";
}
