<script>
import Select from 'svelte-select@4.4.4';
import Item from './BeerItem.svelte';
import loadOptions from './beers.js';
import Icon from './Icon.svelte';
const items = ['One', 'Two', 'Three'];
const complexItems = [
{value: 'chocolate', label: 'Chocolate', group: 'Sweet'},
{value: 'pizza', label: 'Pizza', group: 'Savory'},
{value: 'cake', label: 'Cake', group: 'Sweet', selectable: false},
{value: 'chips', label: 'Chips', group: 'Savory'},
{value: 'ice-cream', label: 'Ice Cream', group: 'Sweet'}
];
const groupBy = (item) => item.group;
const optionIdentifier = 'id';
const getOptionLabel = (option) => option.name;
const getSelectionLabel = (option) => option.name;
</script>
<h2>Default</h2>
<Select {items}></Select>
<h2>Complex</h2>
<Select items={complexItems}></Select>
<h2>Group</h2>
<Select items={complexItems} {groupBy}></Select>
<h2>Multi</h2>
<Select items={complexItems} isMulti={true}></Select>
<h2>Async</h2>
<Select {loadOptions} {optionIdentifier} {getSelectionLabel} {getOptionLabel} {Item} placeholder="Search for 🍺"></Select>