@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Horizontal &amp; Vertical" Code="@_codeSeparator">
    <Stack Gap="3" Class="w-full max-w-sm">
        <Stack>
            <Lumeo.Text Size="sm" Weight="medium" Color="foreground">Radix Primitives</Lumeo.Text>
            <Lumeo.Text Size="xs" Color="muted">An open-source UI component library.</Lumeo.Text>
        </Stack>
        <Separator />
        <Flex Gap="3" Align="center" Class="text-sm text-muted-foreground">
            <Lumeo.Text As="span">Blog</Lumeo.Text>
            <Separator Orientation="Separator.SeparatorOrientation.Vertical" Class="h-4" />
            <Lumeo.Text As="span">Docs</Lumeo.Text>
            <Separator Orientation="Separator.SeparatorOrientation.Vertical" Class="h-4" />
            <Lumeo.Text As="span">Source</Lumeo.Text>
        </Flex>
    </Stack>
</PatternCard>
</Stack>

@code {
        private string _codeSeparator = @"<Separator />
    <Separator Orientation=""Separator.SeparatorOrientation.Vertical"" Class=""h-4"" />";
}
