@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Default" Code="@_codeToggleDefault">
    <Flex Gap="2" Align="center" Justify="center">
        <Toggle @bind-Pressed="_toggle1Pressed">Bold</Toggle>
        <Toggle @bind-Pressed="_toggle2Pressed" Variant="Toggle.ToggleVariant.Outline">Italic</Toggle>
    </Flex>
</PatternCard>
<PatternCard Label="With Icons" Code="@_codeToggleIcons">
    <Flex Gap="2" Align="center" Justify="center">
        <Toggle @bind-Pressed="_toggle3Pressed">
            <DynamicIcon Name="Bold" Class="h-4 w-4" />
        </Toggle>
        <Toggle @bind-Pressed="_toggle4Pressed">
            <DynamicIcon Name="Italic" Class="h-4 w-4" />
        </Toggle>
        <Toggle @bind-Pressed="_toggle5Pressed">
            <DynamicIcon Name="Underline" Class="h-4 w-4" />
        </Toggle>
    </Flex>
</PatternCard>
</Stack>

@code {
    private bool _toggle1Pressed;

    private bool _toggle2Pressed;

    private bool _toggle3Pressed;

    private bool _toggle4Pressed;

    private bool _toggle5Pressed;

        private string _codeToggleDefault = @"<Toggle @bind-Pressed=""_pressed"">Bold</Toggle>
    <Toggle @bind-Pressed=""_pressed2"" Variant=""Toggle.ToggleVariant.Outline"">Italic</Toggle>";

        private string _codeToggleIcons = @"<Toggle @bind-Pressed=""_bold"">
        <Blazicon Svg=""Lucide.Bold"" class=""h-4 w-4"" />
    </Toggle>
    <Toggle @bind-Pressed=""_italic"">
        <Blazicon Svg=""Lucide.Italic"" class=""h-4 w-4"" />
    </Toggle>
    <Toggle @bind-Pressed=""_underline"">
        <Blazicon Svg=""Lucide.Underline"" class=""h-4 w-4"" />
    </Toggle>";
}
