SearchResultItem

One MiniSearch result: highlighted title + excerpt (`<mark>` matches) and an optional tag row.

Filters & Search

With tags

Without tags

English locale prefix

Multiple results

Source

/** @jsxRuntime automatic */
/** @jsxImportSource preact */
// Story for SearchResultItem — new gap story (epic #1647 Wave 6, #1663).
import { defineStory } from '@lib/styleguide/story-contract';
import type { StoryMeta } from '@lib/styleguide/story-contract';
import { SearchResultItem } from './search-result-item';
import type { SearchResult } from '@/src/hooks/use-search';

const meta: StoryMeta = {
  title: 'SearchResultItem',
  category: 'Filters & Search',
  description:
    'One MiniSearch result: highlighted title + excerpt (`<mark>` matches) and an optional tag row.',
  usage: `import { SearchResultItem } from '@/components/search/search-result-item';\n\n<SearchResultItem result={result} localePrefix="" />`,
};
export default meta;

function mockResult(overrides: Partial<SearchResult> = {}): SearchResult {
  return {
    id: 'notes/oxi-one-mk2-review',
    slug: '/notes/oxi-one-mk2-review/',
    locale: 'ja',
    title: 'OXI ONE MKII レビュー',
    excerpt:
      'OXI ONE MKII はステップシーケンサー、MIDIコントローラー、CV/Gateコントローラーを1台に統合したオールインワン・モジュールです。',
    tags: ['oxi', 'sequencer'],
    highlighted_title: 'OXI ONE MKII <mark>レビュー</mark>',
    highlighted_excerpt:
      'OXI ONE MKII はステップ<mark>シーケンサー</mark>、MIDIコントローラー、CV/Gateコントローラーを1台に統合した',
    score: 12.4,
    ...overrides,
  };
}

export const WithTags = defineStory({
  name: 'With tags',
  render: () => (
    <div className="max-w-[560px]">
      <SearchResultItem result={mockResult()} localePrefix="" />
    </div>
  ),
});

export const WithoutTags = defineStory({
  name: 'Without tags',
  render: () => (
    <div className="max-w-[560px]">
      <SearchResultItem result={mockResult({ tags: [] })} localePrefix="" />
    </div>
  ),
});

export const EnglishLocale = defineStory({
  name: 'English locale prefix',
  render: () => (
    <div className="max-w-[560px]">
      <SearchResultItem
        result={mockResult({
          locale: 'en',
          slug: '/notes/oxi-one-mk2-review/',
          highlighted_title: 'OXI ONE MKII <mark>Review</mark>',
          highlighted_excerpt:
            'The OXI ONE MKII is an all-in-one module combining a step <mark>sequencer</mark>, MIDI controller, and CV/Gate controller.',
        })}
        localePrefix="/en"
      />
    </div>
  ),
});

export const MultipleResults = defineStory({
  name: 'Multiple results',
  render: () => (
    <div className="max-w-[560px]">
      <SearchResultItem result={mockResult()} localePrefix="" />
      <SearchResultItem
        result={mockResult({
          id: 'products/2v2-intro',
          slug: '/products/2v2-intro/',
          title: '2v2 — デュアルVCA',
          tags: [],
          highlighted_title: '2v2 — デュアル<mark>VCA</mark>',
          highlighted_excerpt: 'コンパクトな2ch <mark>VCA</mark> モジュール。',
        })}
        localePrefix=""
      />
    </div>
  ),
});

Live CSS

Injected into the previews above. SearchResultItem

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */