5b364ee88.js"],"Logo"] 98:I[19753,["8509","static/chunks/8509-1c34d2d223ffa69b.js","8652","static/chunks/8652-e91928ee91d0fea7.js","9485","static/chunks/9485-a65de9488025b323.js","4053","static/chunks/4053-a9bf04f1896330f9.js","1765","static/chunks/1765-34d24011bfc0b7ce.js","8298","static/chunks/8298-337073bb1746b83e.js","6626","static/chunks/6626-9cc17315172972f4.js","4811","static/chunks/app/components/%5Bid%5D/layout-b12d15e486f4e55c.js"],"ExternalLinkIcon"] 9a:I[78201,[],""] 9:T6d8,import * as React from 'react' 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} )}