Component reference

SearchBlock

Search matches grouped by file, with line numbers.

Preview

SearchBlock has no story of its own; this one draws it as part of a composed scene.

Terminal, file, diff, and search

packages/meowtail/stories/output-blocks.stories.tsxline 14tsx

render: () => (
  <Stack>
    <TerminalBlock
      command="bun test"
      cwd="meowland"
      exitCode={0}
      output={
        "\u001b[32mPASS\u001b[0m renderer\n" +
        Array.from({ length: 24 }, (_, i) => `case ${i + 1}: passed`).join("\n")
      }
    />
    <ReadBlock
      label="src/main.ts"
      totalLines={120}
      lines={Array.from({ length: 24 }, (_, i) => ({
        number: i + 41,
        text: `const item${i} = ${i};`,
        highlighted: i === 2,
      }))}
    />
    <DiffBlock
      files={[
        {
          path: "theme.ts",
          lines: [
            { kind: "context", text: "export const theme = {" },
            { kind: "removed", text: "  radius: 8," },
            { kind: "added", text: "  radius: 16," },
            { kind: "context", text: "};" },
          ],
        },
      ]}
    />
    <SearchBlock
      kind="matches"
      total={20}
      truncated
      files={[
        { path: "src/theme.ts", matches: [{ lineNumber: 12, line: "export const theme = {};" }] },
        {
          path: "src/main.ts",
          matches: [{ lineNumber: 4, line: "import { theme } from './theme';" }],
        },
      ]}
    />
  </Stack>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { SearchBlock } from "meowtail";

<SearchBlock
  kind="matches"
  total={20}
  truncated
  files={[
    { path: "src/theme.ts", matches: [{ lineNumber: 12, line: "export const theme = {};" }] },
    {
      path: "src/main.ts",
      matches: [{ lineNumber: 4, line: "import { theme } from './theme';" }],
    },
  ]}
/>

API reference

Props

Prop	Type	Default
`total`Required	`number`	–
`truncated`	`boolean`	–
`maxLines`	`number`	–
`onCopy`	`(text: string) => Promise<void>`	–

Also takes className, children and the attributes and events of its root element.

It also takes exactly one of these shapes:

{ kind: "paths"; paths: readonly string[] }{ kind: "matches"; files: readonly SearchFileGroup[] }

DOM parts

rootfilepathmatchnumber

Registry

The component is registered as search-block in the meowtail component registry.