@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Basic Segmented" Code="@_codeBasic">
    <Segmented @bind-Value="_view" Options="@_viewOptions" />
</PatternCard>

<PatternCard Label="Block (Full Width)" Code="@_codeBlock">
    <Segmented @bind-Value="_size" Options="@_sizeOptions" Block="true" Class="max-w-sm" />
</PatternCard>
</Stack>

@code {
    private string _view = "list";
    private string _size = "md";

    private List<Segmented.SegmentedOption> _viewOptions = new()
    {
        new() { Label = "List", Value = "list" },
        new() { Label = "Grid", Value = "grid" },
        new() { Label = "Board", Value = "board" },
    };

    private List<Segmented.SegmentedOption> _sizeOptions = new()
    {
        new() { Label = "Small", Value = "sm" },
        new() { Label = "Medium", Value = "md" },
        new() { Label = "Large", Value = "lg" },
    };

    private string _codeBasic = @"<Segmented @bind-Value=""_view"" Options=""@_options"" />";

    private string _codeBlock = @"<Segmented @bind-Value=""_size"" Options=""@_options"" Block=""true"" />";
}
