# presentation/renderers/figure.renderer.ts

> 17 lines of code and 3 definitions.

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

## Definitions

- `renderFigure` (lexical_declaration, line 14, exported)
- `innerOf` (lexical_declaration, line 6)
- `{ figure }` (lexical_declaration, line 7)

## Uses

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

## Used by

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

## Source

```typescript
import type { FigureBlock } from "#types/block.types";
import { createCodeBlock } from "#presentation/components/code.component";
import { createElement } from "#core/factories/element.factory";
import { renderGrammarBlock } from "#presentation/renderers/grammar.renderer";

const innerOf = function innerOf(block: FigureBlock): Element {
    const { figure } = block;
    if (figure.kind === "code") {
        return createCodeBlock(figure.code, figure.title, figure.language);
    }
    return renderGrammarBlock(figure);
};

export const renderFigure = function renderFigure(block: FigureBlock): Element {
    return createElement("figure", {
        children: [createElement("figcaption", { className: "figure-caption", text: block.caption }), innerOf(block)],
        className: "block-figure",
    });
};
```