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

     1  /** @jsx jsx */
     2  import { jsx } from "theme-ui"
     3  import React from "react"
     4  
     5  import * as headings from "gatsby-theme-docz/src/components/Headings"
     6  import { Layout } from "gatsby-theme-docz/src/components/Layout"
     7  import { Playground } from "gatsby-theme-docz/src/components/Playground"
     8  import { Props } from "gatsby-theme-docz/src/components/Props"
     9  import ThemeStyles from "gatsby-theme-docz/src/theme/styles"
    10  
    11  import "typeface-fira-mono"
    12  import "typeface-source-sans-pro"
    13  
    14  import { Code, CodeBlock, Pre } from "./codeblock"
    15  
    16  const localStyles = {
    17    backgroundLight: "#2d37471f",
    18  }
    19  
    20  // custom "box" (blockquote)
    21  const Box = props => (
    22    <div
    23      sx={{
    24        borderLeft: ".25em solid black",
    25        borderColor: "text",
    26        padding: ".25em",
    27        paddingLeft: "1em",
    28        background: localStyles.backgroundLight,
    29        marginBottom: "1rem",
    30      }}
    31    >
    32      {// remove the marginBottom from the last element
    33      React.Children.map(props.children, (child, i) =>
    34        i === React.Children.toArray(props.children).length - 1
    35          ? React.cloneElement(child, {
    36              style: { marginBottom: 0 },
    37            })
    38          : child
    39      )}
    40    </div>
    41  )
    42  
    43  const Table = props => (
    44    <div
    45      sx={{
    46        overflowX: "auto",
    47      }}
    48    >
    49      <table
    50        {...props}
    51        sx={{
    52          ...ThemeStyles.table,
    53        }}
    54      ></table>
    55    </div>
    56  )
    57  
    58  const inlineCode = props => (
    59    <Code style={{ background: localStyles.backgroundLight }}>
    60      {props.children}
    61    </Code>
    62  )
    63  
    64  export default {
    65    ...headings,
    66    playground: Playground,
    67    layout: Layout,
    68    props: Props,
    69    code: CodeBlock,
    70    pre: Pre,
    71    blockquote: Box,
    72    table: Table,
    73    inlineCode: inlineCode,
    74  }