# presentation/renderers/link.renderer.ts

> 36 lines of code and 5 definitions.

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

## Definitions

- `renderLinks` (lexical_declaration, line 32, exported)
- `renderNavigation` (lexical_declaration, line 6)
- `renderLinkEntry` (lexical_declaration, line 19)
- `body` (lexical_declaration, line 7)
- `wrapper` (lexical_declaration, line 33, exported)

## Uses

- [core/factories/element.factory.ts](https://banes-lab.com/source/tree/core/factories/element.factory.ts.md)
- [presentation/components/link.component.ts](https://banes-lab.com/source/tree/presentation/components/link.component.ts.md)

## Used by

- [presentation/renderers/block.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/block.renderer.ts.md)

## Source

```typescript
import { ARROW_ICON, ICON_BASE_CLASS } from "#configuration/icons/element.icons";
import type { LinkBlock, LinkEntry } from "#types/block.types";
import { appendChildren, createElement } from "#core/factories/element.factory";
import { createLink } from "#presentation/components/link.component";

const renderNavigation = function renderNavigation(entry: LinkEntry, icon: string): Element {
    const body = createElement("div", { className: "block-nav-body" });
    body.append(createElement("h4", { className: "block-nav-title", text: entry.text }));
    if (entry.description !== undefined) {
        body.append(createElement("p", { className: "block-nav-description", text: entry.description }));
    }
    return createLink(entry.href, "block-nav", [
        createElement("i", { className: `${ICON_BASE_CLASS} ${icon} block-nav-icon` }),
        body,
        createElement("i", { className: `${ICON_BASE_CLASS} ${ARROW_ICON} block-nav-arrow` }),
    ]);
};

const renderLinkEntry = function renderLinkEntry(entry: LinkEntry, button: boolean): Element {
    if (entry.icon === undefined) {
        return createLink(entry.href, "block-link", [entry.text]);
    }
    if (button) {
        return createLink(entry.href, "block-button", [
            createElement("i", { className: `${ICON_BASE_CLASS} ${entry.icon}` }),
            createElement("span", { text: entry.text }),
        ]);
    }
    return renderNavigation(entry, entry.icon);
};

export const renderLinks = function renderLinks(block: LinkBlock): Element {
    const wrapper = createElement("div", { className: "block-links" });
    appendChildren(
        wrapper,
        block.links.map((entry) => renderLinkEntry(entry, block.button === true)),
    );
    return wrapper;
};
```