reflex-ui/shared/reflex_ui_shared/components/blocks/code.py at 36cfe7b8ffde44425aa795d9defddc7d62099458 · reflex-dev/reflex-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
"""Code block components for documentation pages."""

import reflex as rx

import reflex_ui_shared.styles.fonts as fonts
from reflex_ui_shared import styles


@rx.memo
def code_block(code: str, language: str):
    return rx.box(
        rx._x.code_block(
            code,
            language=language,
            class_name="code-block",
            can_copy=True,
        ),
        class_name="relative mb-4",
    )


@rx.memo
def code_block_dark(code: str, language: str):
    return rx.box(
        rx._x.code_block(
            code,
            language=language,
            class_name="code-block",
            can_copy=True,
        ),
        class_name="relative mb-4",
    )


def code_block_markdown(*children, **props):
    language = props.get("language", "plain")
    return code_block(code=children[0], language=language)


def code_block_markdown_dark(*children, **props):
    language = props.get("language", "plain")
    return code_block_dark(code=children[0], language=language)


def doccmdoutput(
    command: str,
    output: str,
) -> rx.Component:
    """Create a documentation code snippet.

    Args:
        command: The command to display.
        output: The output of the command.
        theme: The theme of the component.

    Returns:
        The styled command and its example output.
    """
    return rx.vstack(
        rx._x.code_block(
            command,
            can_copy=True,
            border_radius=styles.DOC_BORDER_RADIUS,
            background="transparent",
            theme="ayu-dark",
            language="bash",
            code_tag_props={
                "style": {
                    "fontFamily": "inherit",
                }
            },
            style=fonts.code,
            font_family="JetBrains Mono",
            width="100%",
        ),
        rx._x.code_block(
            output,
            can_copy=False,
            border_radius="12px",
            background="transparent",
            theme="ayu-dark",
            language="log",
            code_tag_props={
                "style": {
                    "fontFamily": "inherit",
                }
            },
            style=fonts.code,
            font_family="JetBrains Mono",
            width="100%",
        ),
        padding_y="1em",
    )