# presentation/renderers/search.renderer.ts

> 34 lines of code and 8 definitions.

Tree: Site tree
Language: typescript
Layer: product
Canonical: https://banes-lab.com/anatomy/tree#file-presentation-renderers-search-renderer-ts
Source text: https://banes-lab.com/assets/sources/source.998829928730e60c94ae4338dd369db5a84d034a54aa918832928ff2b6483bb0.generated.txt

## Definitions

- `renderSpreadContent` (lexical_declaration, line 28)
- `renderHomeLink` (lexical_declaration, line 9)
- `spreadTab` (lexical_declaration, line 24)
- `renderSpread` (lexical_declaration, line 35, exported)
- `link` (lexical_declaration, line 11)
- `bar` (lexical_declaration, line 20)
- `{ source }` (lexical_declaration, line 29)
- `tone` (lexical_declaration, line 36, exported)

## Uses

- [core/factories/element.factory.ts](https://banes-lab.com/source/tree/core/factories/element.factory.ts.md)
- [presentation/renderers/document.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/document.renderer.ts.md)
- [presentation/renderers/tab.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/tab.renderer.ts.md)

## Source

```typescript
import type { SearchSource, SearchSpread } from "#types/search.types";
import { ICON_BASE_CLASS } from "#configuration/icons/element.icons";
import type { Tab } from "#types/document.types";
import { createElement } from "#core/factories/element.factory";
import { createPageLink } from "#presentation/components/link.component";
import { renderContent } from "#presentation/renderers/tab.renderer";
import { renderDocumentSections } from "#presentation/renderers/document.renderer";

const renderHomeLink = function renderHomeLink(spread: SearchSpread): Element {
    const { source } = spread;
    const link = createPageLink(
        source.page,
        "tab-button",
        [
            createElement("i", { className: `${ICON_BASE_CLASS} ${source.icon}` }),
            createElement("span", { className: "tab-label", text: source.label }),
        ],
        spread.home,
    );
    const bar = createElement("nav", { children: [link], className: "tab-bar" });
    return createElement("div", { children: [bar], className: "tab-anchor search-anchor" });
};

const spreadTab = function spreadTab(source: SearchSource, spread: SearchSpread): Tab {
    return { icon: source.tab.icon, id: source.tab.id, label: source.tab.label, sections: spread.sections };
};

const renderSpreadContent = function renderSpreadContent(spread: SearchSpread): Element {
    const { source } = spread;
    return source.layout === "document"
        ? renderDocumentSections(spread.sections)
        : renderContent(source.layout, spreadTab(source, spread));
};

export const renderSpread = function renderSpread(spread: SearchSpread): Element {
    const tone = spread.source.tone === null ? "tab-page" : `tab-page ${spread.source.tone}`;
    return createElement("div", { children: [renderHomeLink(spread), renderSpreadContent(spread)], className: tone });
};
```