@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Single Keys" Code="@_codeKbdSingle">
    <Flex Gap="2" Align="center" Justify="center">
        <Kbd>Enter</Kbd>
        <Kbd>Escape</Kbd>
        <Kbd>Tab</Kbd>
    </Flex>
</PatternCard>
<PatternCard Label="Key Combinations" Code="@_codeKbdCombinations">
    <Flex Gap="4" Align="center" Justify="center">
        <Flex Inline="true" Gap="1" Align="center" Class="text-sm text-muted-foreground">
            <Kbd>⌘</Kbd><Kbd>K</Kbd>
        </Flex>
        <Flex Inline="true" Gap="1" Align="center" Class="text-sm text-muted-foreground">
            <Kbd>Ctrl</Kbd><Kbd>Shift</Kbd><Kbd>P</Kbd>
        </Flex>
    </Flex>
</PatternCard>
</Stack>

@code {
        private string _codeKbdSingle = @"<Kbd>Enter</Kbd>
    <Kbd>Escape</Kbd>
    <Kbd>Tab</Kbd>";

        private string _codeKbdCombinations = @"<Flex Inline=""true"" Align=""center"" Gap=""1"">
        <Kbd>⌘</Kbd><Kbd>K</Kbd>
    </Flex>
    <Flex Inline=""true"" Align=""center"" Gap=""1"">
        <Kbd>Ctrl</Kbd><Kbd>Shift</Kbd><Kbd>P</Kbd>
    </Flex>";
}
