Search

Demos

Search is a layout shell for a search experience; it composes SearchHeader, SearchResults, SearchEmptyState and SearchRecommendation. Live querying is wired up via htmx in the website.

Drawer with recommendations

Fullscreen
import {
  CtaButton,
  Icon,
  Search,
  SearchEmptyState,
  SearchHeader,
  SearchRecommendation,
  SearchResults,
} from 'marketing-ui'
import { IconMagnifyingGlass2 } from 'icons'

function Demo() {
  return (
    <Search variant='drawer'>
      <SearchHeader>
        <SearchRecommendation title='Beliebte Suchbegriffe'>
          <CtaButton size='tiny' variant='grey' href='#'>
            Felgenreiniger
          </CtaButton>
          <CtaButton size='tiny' variant='grey' href='#'>
            Autoshampoo
          </CtaButton>
          <CtaButton size='tiny' variant='grey' href='#'>
            Lackversiegelung
          </CtaButton>
        </SearchRecommendation>
      </SearchHeader>

      <SearchResults>
        <SearchEmptyState
          icon={<Icon i={IconMagnifyingGlass2} />}
          title='Noch keine Suche'
        />
      </SearchResults>
    </Search>
  )
}

export default Demo

No results

Fullscreen
import { Icon, Search, SearchEmptyState, SearchResults } from 'marketing-ui'
import { IconCrossLarge } from 'icons'

function Demo() {
  return (
    <Search variant='topic'>
      <SearchResults>
        <SearchEmptyState
          variant='no-results'
          icon={<Icon i={IconCrossLarge} />}
          title='Keine Ergebnisse'
          copy='Bitte versuchen Sie es mit einem anderen Suchbegriff.'
        />
      </SearchResults>
    </Search>
  )
}

export default Demo

Props