SearchResultCard

Compact card for displaying search results and typeahead suggestions.

Props

Prop	Type	Required	Default	Description
`result`	`SearchSuggestion`	Yes	-	Search result data
`compact`	`boolean`	No	`true`	Use smaller image size (40px vs 52px)
`onClick`	`() => void`	No	-	Callback when card is clicked

SearchSuggestion Interface

1interface SearchSuggestion {
2  title: string;
3  url: string;
4  _content_type: 'blogpost' | 'guide' | 'person' | 'live_stream' | string;
5  image?: {
6    url: string;
7    alt?: string;
8  };
9}

interface SearchSuggestion {
  title: string;
  url: string;
  _content_type: 'blogpost' | 'guide' | 'person' | 'live_stream' | string;
  image?: {
    url: string;
    alt?: string;
  };
}

Usage

1import { SearchResultCard } from '@/components/cards';
2
3<SearchResultCard
4  result={{
5    title: "Getting Started with Contentstack",
6    url: "/blog/getting-started",
7    _content_type: "blogpost",
8    image: { url: "/image.jpg", alt: "Blog image" }
9  }}
10  onClick={() => closeDropdown()}
11/>

import { SearchResultCard } from '@/components/cards';

<SearchResultCard
  result={{
    title: "Getting Started with Contentstack",
    url: "/blog/getting-started",
    _content_type: "blogpost",
    image: { url: "/image.jpg", alt: "Blog image" }
  }}
  onClick={() => closeDropdown()}
/>

Features

Image or icon fallback: Shows result image if available, otherwise a content-type icon
Content type badge: Displays label based on content type (Blog, Guide, Live Stream, Person)
Hover effects: Background color change and teal accent on title
Accessible: Focus-visible outline for keyboard navigation

Content Type Mapping

Content Type	Label	Fallback Icon
`blogpost`	Blog	description
`guide`	Guide	description
`live_stream`	Live Stream	play_arrow
`person`	Person	person

Notes

Used by HeaderSearch for typeahead suggestions
Uses MediaItem for images and Icons for fallback icons
Links to result URL using Next.js Link