@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Default" Code="@_codeLabelDefault">
    <Stack Gap="1.5">
        <Label>Email address</Label>
        <Input placeholder="you@example.com" Class="w-64" />
    </Stack>
</PatternCard>
<PatternCard Label="With Required Indicator" Code="@_codeLabelRequired">
    <Stack Gap="1.5">
        <Flex Gap="1" Align="center">
            <Label>Username</Label>
            <Lumeo.Text As="span" Size="xs" Color="destructive">*</Lumeo.Text>
        </Flex>
        <Input placeholder="johndoe" Class="w-64" />
        <Lumeo.Text Size="xs" Color="muted">This is your public display name.</Lumeo.Text>
    </Stack>
</PatternCard>
</Stack>

@code {
        private string _codeLabelDefault = @"<Stack Gap=""1.5"">
        <Label>Email address</Label>
        <Input placeholder=""you@example.com"" />
    </Stack>";

        private string _codeLabelRequired = @"<Stack Gap=""1.5"">
        <Flex Align=""center"" Gap=""1"">
            <Label>Username</Label>
            <Lumeo.Text As=""span"" Size=""xs"" Color=""destructive"">*</Lumeo.Text>
        </Flex>
        <Input placeholder=""johndoe"" />
        <Lumeo.Text Size=""xs"" Color=""muted"">This is your public display name.</Lumeo.Text>
    </Stack>";
}
