github.com/grafana/tanka@v0.26.1-0.20240506093700-c22cfc35c21a/docs/src/gatsby-theme-docz/components/codeblock.js (about)

     1  import { ChevronDown, ChevronUp } from "gatsby-theme-docz/src/components/Icons"
     2  import React, { useState } from "react"
     3  
     4  import ThemeStyles from "gatsby-theme-docz/src/theme/styles"
     5  /** @jsx jsx */
     6  import { jsx } from "theme-ui"
     7  
     8  export const Code = props => (
     9    <code
    10      sx={{
    11        ...props.style,
    12        fontFamily: "Fira Mono, monospace",
    13        fontSize: "1rem",
    14      }}
    15    >
    16      {props.children}
    17    </code>
    18  )
    19  
    20  // Smart codeblock: shows only first 25 lines, if longer an expand button
    21  export const CodeBlock = props => {
    22    const lines = React.Children.toArray(props.children).reduce((n, c) => {
    23      if (c?.props?.className === "vscode-highlight-line") {
    24        return n + 1
    25      }
    26      return n
    27    }, 0)
    28  
    29    return (
    30      <Code>
    31        {lines > 20 ? <LongCode>{props.children}</LongCode> : props.children}
    32      </Code>
    33    )
    34  }
    35  
    36  export const Pre = props => (
    37    <pre
    38      {...props}
    39      sx={{
    40        ...ThemeStyles.pre,
    41        fontSize: "1rem",
    42        lineHeight: 1.4,
    43        overflowX: "auto",
    44      }}
    45    ></pre>
    46  )
    47  
    48  // Expandable codeblock
    49  const LongCode = props => {
    50    const [toggled, setToggled] = useState(false)
    51  
    52    return (
    53      <>
    54        {toggled
    55          ? props.children
    56          : React.Children.map(props.children, (child, i) => {
    57              if (i < 20 * 2) return child
    58            })}
    59        <Expand toggled={toggled} onClick={() => setToggled(!toggled)}></Expand>
    60      </>
    61    )
    62  }
    63  
    64  // ExpandButton
    65  const Expand = props => (
    66    <button
    67      onClick={props.onClick}
    68      sx={{
    69        background: "inherit",
    70        border: "none",
    71        color: "inherit",
    72        fontFamily: "inherit",
    73        fontSize: "inherit",
    74        textDecoration: "underline",
    75        cursor: "pointer",
    76        ":hover": {
    77          textDecoration: "none",
    78        },
    79        display: "flex",
    80        padding: 0,
    81        width: "100%",
    82        justifyContent: "center",
    83      }}
    84    >
    85      <div
    86        sx={{
    87          display: "flex",
    88          alignItems: "center",
    89        }}
    90      >
    91        {props.toggled ? <ChevronUp></ChevronUp> : <ChevronDown></ChevronDown>}
    92        Show {props.toggled ? "less" : "more"}
    93      </div>
    94    </button>
    95  )