t' import { Search } from '@welcome-ui/search' import { Box } from '@welcome-ui/box' import { Text } from '@welcome-ui/text' import { Tag } from '@welcome-ui/tag' type Item = { Title: string; Type: 'movie' | 'serie' } type Acc = { movies: Item[]; series: Item[] } const Example = () => { const searchFunction = async (s: string) => { const response = await fetch(`https://www.omdbapi.com?apikey=41514363&s=${s}`) const data = await response.json() const searchResults = (data.Search || []).reduce( (acc: Acc, item: Item) => { if (item.Type === 'movie') { acc.movies.push(item) } else { acc.series.push(item) } return acc }, { movies: [], series: [] } ) return [ { label: 'Movies', options: searchResults.movies }, { label: 'Series', options: searchResults.series }, ] } return ( // TODO: fix typescript // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore item && item.Title} name="movies" placeholder="Search a movie" renderGroupHeader={({ label, options }) => ( {label} {options.length} {options.length === 0 && No results found} )} renderItem={(item: Item) => (

{item.Title}

)} search={searchFunction} /> ) } export default Example 17:["props"] 16:{"id":"button","title":"Button","subPages":"$17"} 19:["props"] 18:{"id":"button-group","title":"ButtonGroup","subPages":"$19"} 1b:["props"] 1a:{"id":"link","title":"Link","subPages":"$1b"} 15:["$16","$18","$1a"] 14:{"category":"actions","parent":"components","pages":"$15"} 1f:["props"] 1e:{"id":"accordio