# presentation/renderers/home.renderer.ts

> 77 lines of code and 14 definitions.

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

## Definitions

- `renderStat` (lexical_declaration, line 64)
- `renderRow` (lexical_declaration, line 28)
- `renderRows` (lexical_declaration, line 53, exported)
- `renderStats` (lexical_declaration, line 79, exported)
- `chip` (lexical_declaration, line 14)
- `audienceChip` (lexical_declaration, line 21)
- `ROW_STEP` (lexical_declaration, line 10)
- `STAT_STEP` (lexical_declaration, line 11)
- `ZERO` (lexical_declaration, line 12)
- `icon` (lexical_declaration, line 29)
- `heading` (lexical_declaration, line 31)
- `chips` (lexical_declaration, line 37)
- `go` (lexical_declaration, line 44)
- `rail` (lexical_declaration, line 57, 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)
- [presentation/renderers/element.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/element.renderer.ts.md)

## Used by

- [presentation/views/home.view.ts](https://banes-lab.com/source/tree/presentation/views/home.view.ts.md)

## Source

```typescript
import type { HomeRowCopy, HomeRowLink, HomeStat, HomeTag } from "#types/home.types";
import { createLink, createPageLink } from "#presentation/components/link.component";
import { FADE_IN_UP } from "#configuration/constants/element.constants";
import { RAIL_ID } from "#core/ids/home.ids";
import { SETTLED_TEXT_ATTRIBUTE } from "#configuration/constants/document.constants";
import { animated } from "#presentation/renderers/element.renderer";
import { createElement } from "#core/factories/element.factory";
import { tagsFor } from "#domain/converters/home.converter";

const ROW_STEP = 60;
const STAT_STEP = 60;
const ZERO = "0";

const chip = function chip(tag: HomeTag): HTMLElement {
    return createElement("li", {
        children: [createLink(tag.path, "chip chip-link", [tag.label])],
        className: "chip-row",
    });
};

const audienceChip = function audienceChip(label: string): HTMLElement {
    return createElement("li", {
        children: [createElement("span", { className: "chip muted", text: label })],
        className: "audience",
    });
};

const renderRow = function renderRow(copy: HomeRowCopy, link: HomeRowLink, delay: number): HTMLElement {
    const icon = createPageLink(link.page, `page-icon ${link.accent}`, [createElement("i", { className: link.icon })]);
    icon.setAttribute("aria-label", copy.title);
    const heading = createElement("h2", {
        children: [
            createPageLink(link.page, "row-title", [copy.title]),
            createElement("small", { text: copy.subtitle }),
        ],
    });
    const chips = createElement("ul", {
        children: [
            ...tagsFor(link.page).map(chip),
            ...(copy.audience === undefined ? [] : [audienceChip(copy.audience)]),
        ],
        className: "chips",
    });
    const go = createPageLink(link.page, "go", [copy.go]);
    return animated(
        "article",
        { children: [icon, heading, createElement("p", { text: copy.description }), chips, go], className: "home-row" },
        FADE_IN_UP,
        delay,
    );
};

export const renderRows = function renderRows(
    rows: readonly (readonly [HomeRowCopy, HomeRowLink])[],
    base: number,
): HTMLElement {
    const rail = createElement("div", { attributes: { id: RAIL_ID }, className: "home-rail" });
    return createElement("div", {
        children: [rail, ...rows.map(([copy, link], index) => renderRow(copy, link, base + index * ROW_STEP))],
        className: "home-rows",
    });
};

const renderStat = function renderStat(stat: HomeStat, delay: number): HTMLElement {
    return animated(
        "div",
        {
            children: [
                createElement("b", { attributes: { [SETTLED_TEXT_ATTRIBUTE]: String(stat.value) }, text: ZERO }),
                createElement("span", { text: stat.label }),
            ],
            className: "home-stat",
        },
        FADE_IN_UP,
        delay,
    );
};

export const renderStats = function renderStats(stats: readonly HomeStat[], base: number): HTMLElement {
    return createElement("section", {
        children: stats.map((stat, index) => renderStat(stat, base + index * STAT_STEP)),
        className: "home-stats",
    });
};
```