@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Default" Code="@_codeComboboxDefault">
    <Combobox @bind-Value="_combobox1Value" @bind-Open="_combobox1Open" Class="w-64">
        <ComboboxInput Placeholder="Select framework..." />
        <ComboboxContent>
            <ComboboxItem Value="Next.js">Next.js</ComboboxItem>
            <ComboboxItem Value="SvelteKit">SvelteKit</ComboboxItem>
            <ComboboxItem Value="Nuxt.js">Nuxt.js</ComboboxItem>
            <ComboboxItem Value="Remix">Remix</ComboboxItem>
            <ComboboxEmpty>No framework found.</ComboboxEmpty>
        </ComboboxContent>
    </Combobox>
</PatternCard>

<PatternCard Label="Searchable" Code="@_codeComboboxSearch">
    <Combobox @bind-Value="_combobox2Value" @bind-Open="_combobox2Open" Class="w-64">
        <ComboboxInput Placeholder="Search languages..." />
        <ComboboxContent>
            <ComboboxItem Value="C#">C#</ComboboxItem>
            <ComboboxItem Value="TypeScript">TypeScript</ComboboxItem>
            <ComboboxItem Value="Rust">Rust</ComboboxItem>
            <ComboboxItem Value="Go">Go</ComboboxItem>
            <ComboboxItem Value="Python">Python</ComboboxItem>
            <ComboboxEmpty>No language found.</ComboboxEmpty>
        </ComboboxContent>
    </Combobox>
</PatternCard>
</Stack>

@code {
    private string? _combobox1Value;

    private bool _combobox1Open;

    private string? _combobox2Value;

    private bool _combobox2Open;

        private string _codeComboboxDefault = @"<Combobox @bind-Value=""_value"" @bind-Open=""_open"">
        <ComboboxInput Placeholder=""Select framework..."" />
        <ComboboxContent>
            <ComboboxItem Value=""Next.js"">Next.js</ComboboxItem>
            <ComboboxItem Value=""SvelteKit"">SvelteKit</ComboboxItem>
            <ComboboxItem Value=""Nuxt.js"">Nuxt.js</ComboboxItem>
            <ComboboxEmpty>No framework found.</ComboboxEmpty>
        </ComboboxContent>
    </Combobox>";

        private string _codeComboboxSearch = @"<Combobox @bind-Value=""_value"" @bind-Open=""_open"">
        <ComboboxInput Placeholder=""Search languages..."" />
        <ComboboxContent>
            <ComboboxItem Value=""C#"">C#</ComboboxItem>
            <ComboboxItem Value=""TypeScript"">TypeScript</ComboboxItem>
            <ComboboxItem Value=""Rust"">Rust</ComboboxItem>
            <ComboboxEmpty>No language found.</ComboboxEmpty>
        </ComboboxContent>
    </Combobox>";
}
