@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Basic Context Menu" Code="@_codeContextMenuBasic">
    <ContextMenu @bind-Open="_contextMenu1Open">
        <ContextMenuTrigger>
            <Flex Align="center" Justify="center" Class="h-32 w-full max-w-xs rounded-md border border-dashed border-border text-sm text-muted-foreground">
                Right click here
            </Flex>
        </ContextMenuTrigger>
        <ContextMenuContent>
            <ContextMenuItem>Back</ContextMenuItem>
            <ContextMenuItem>Forward</ContextMenuItem>
            <ContextMenuItem>Reload</ContextMenuItem>
            <ContextMenuSeparator />
            <ContextMenuItem>View Source</ContextMenuItem>
            <ContextMenuItem>Inspect</ContextMenuItem>
        </ContextMenuContent>
    </ContextMenu>
</PatternCard>
<PatternCard Label="With Groups" Code="@_codeContextMenuGroups">
    <ContextMenu @bind-Open="_contextMenu2Open">
        <ContextMenuTrigger>
            <Flex Align="center" Justify="center" Class="h-32 w-full max-w-xs rounded-md border border-dashed border-border text-sm text-muted-foreground">
                Right click here
            </Flex>
        </ContextMenuTrigger>
        <ContextMenuContent>
            <ContextMenuLabel>Edit</ContextMenuLabel>
            <ContextMenuItem>Cut</ContextMenuItem>
            <ContextMenuItem>Copy</ContextMenuItem>
            <ContextMenuItem>Paste</ContextMenuItem>
            <ContextMenuSeparator />
            <ContextMenuLabel>View</ContextMenuLabel>
            <ContextMenuItem>Zoom In</ContextMenuItem>
            <ContextMenuItem>Zoom Out</ContextMenuItem>
            <ContextMenuItem>Reset Zoom</ContextMenuItem>
        </ContextMenuContent>
    </ContextMenu>
</PatternCard>
</Stack>

@code {
    private bool _contextMenu1Open;

    private bool _contextMenu2Open;

        private string _codeContextMenuBasic = @"<ContextMenu @bind-Open=""_open"">
        <ContextMenuTrigger>
            <div class=""flex h-32 w-64 items-center justify-center rounded-md border border-dashed"">
                Right click here
            </div>
        </ContextMenuTrigger>
        <ContextMenuContent>
            <ContextMenuItem>Back</ContextMenuItem>
            <ContextMenuItem>Forward</ContextMenuItem>
            <ContextMenuItem>Reload</ContextMenuItem>
            <ContextMenuSeparator />
            <ContextMenuItem>View Source</ContextMenuItem>
            <ContextMenuItem>Inspect</ContextMenuItem>
        </ContextMenuContent>
    </ContextMenu>";

        private string _codeContextMenuGroups = @"<ContextMenu @bind-Open=""_open"">
        <ContextMenuTrigger>
            <div class=""flex h-32 w-64 items-center justify-center rounded-md border border-dashed"">
                Right click here
            </div>
        </ContextMenuTrigger>
        <ContextMenuContent>
            <ContextMenuLabel>Edit</ContextMenuLabel>
            <ContextMenuItem>Cut</ContextMenuItem>
            <ContextMenuItem>Copy</ContextMenuItem>
            <ContextMenuItem>Paste</ContextMenuItem>
            <ContextMenuSeparator />
            <ContextMenuLabel>View</ContextMenuLabel>
            <ContextMenuItem>Zoom In</ContextMenuItem>
            <ContextMenuItem>Zoom Out</ContextMenuItem>
        </ContextMenuContent>
    </ContextMenu>";
}
