coder/site/src/components/CodeExample/CodeExample.tsx

import { makeStyles, Theme } from "@material-ui/core/styles"
import { FC } from "react"
import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
import { combineClasses } from "../../util/combineClasses"
import { CopyButton } from "../CopyButton/CopyButton"

export interface CodeExampleProps {
  code: string
  className?: string
  buttonClassName?: string
  tooltipTitle?: string
  inline?: boolean
}

/**
 * Component to show single-line code examples, with a copy button
 */
export const CodeExample: FC<React.PropsWithChildren<CodeExampleProps>> = ({
  code,
  className,
  buttonClassName,
  tooltipTitle,
  inline,
}) => {
  const styles = useStyles({ inline: inline })

  return (
    <div className={combineClasses([styles.root, className])}>
      <code className={styles.code}>{code}</code>
      <CopyButton
        text={code}
        tooltipTitle={tooltipTitle}
        buttonClassName={combineClasses([styles.button, buttonClassName])}
      />
    </div>
  )
}

interface styleProps {
  inline?: boolean
}

const useStyles = makeStyles<Theme, styleProps>((theme) => ({
  root: (props) => ({
    display: props.inline ? "inline-flex" : "flex",
    flexDirection: "row",
    alignItems: "center",
    background: props.inline ? "rgb(0 0 0 / 30%)" : "hsl(223, 27%, 3%)",
    border: props.inline ? undefined : `1px solid ${theme.palette.divider}`,
    color: theme.palette.primary.contrastText,
    fontFamily: MONOSPACE_FONT_FAMILY,
    fontSize: 14,
    borderRadius: theme.shape.borderRadius,
    padding: props.inline ? "0px" : theme.spacing(0.5),
  }),
  code: (props) => ({
    padding: `
      ${props.inline ? 0 : theme.spacing(0.5)}px
      ${theme.spacing(0.75)}px
      ${props.inline ? 0 : theme.spacing(0.5)}px
      ${props.inline ? theme.spacing(1) : theme.spacing(2)}px
    `,
    width: "100%",
    display: "flex",
    alignItems: "center",
    wordBreak: "break-all",
  }),
  button: (props) => ({
    border: 0,
    minWidth: props.inline ? 30 : 42,
    minHeight: props.inline ? 30 : 42,
    borderRadius: theme.shape.borderRadius,
    padding: props.inline ? theme.spacing(0.4) : undefined,
    background: "transparent",
  }),
}))