Transfer List

<MokaTransferList TItem="string"
                  AvailableItems="available"
                  @bind-SelectedItems="selected" />

@code {
    IReadOnlyList<string> available = new[] { "Alpha", "Bravo", "Charlie", "Delta", "Echo" };
    IReadOnlyList<string> selected = Array.Empty<string>();
}

<MokaTransferList TItem="string"
                  AvailableItems="langs"
                  @bind-SelectedItems="chosenLangs"
                  AvailableTitle="Languages"
                  SelectedTitle="My Stack">
    <ItemTemplate>
        <MokaFlexbox Align="MokaAlign.Center" Gap="MokaSpacingScale.Xs">
            <MokaIcon Icon="MokaIcons.File.Code" Size="MokaSize.Sm" />
            <MokaText>@context</MokaText>
        </MokaFlexbox>
    </ItemTemplate>
</MokaTransferList>

@code {
    IReadOnlyList<string> langs = new[] { "C#", "TypeScript", "Python", "Rust", "Go" };
    IReadOnlyList<string> chosenLangs = Array.Empty<string>();
}

<MokaTransferList TItem="string"
                  AvailableItems="cities"
                  @bind-SelectedItems="visitedCities"
                  AvailableTitle="All Cities"
                  SelectedTitle="Visited"
                  Searchable="true" />

@code {
    IReadOnlyList<string> cities = new[] { "Tokyo", "London", "New York", "Paris", "Sydney", "Berlin", "Toronto" };
    IReadOnlyList<string> visitedCities = Array.Empty<string>();
}