mirror of
https://github.com/coder/coder.git
synced 2025-07-10 23:53:15 +00:00
* resolves #3356 * scaffolded out new audit page header resolves #3357 * added tests and stories * run prettier
72 lines
1.7 KiB
TypeScript
72 lines
1.7 KiB
TypeScript
import { makeStyles } 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
|
|
}
|
|
|
|
/**
|
|
* Component to show single-line code examples, with a copy button
|
|
*/
|
|
export const CodeExample: FC<CodeExampleProps> = ({
|
|
code,
|
|
className,
|
|
buttonClassName,
|
|
tooltipTitle,
|
|
}) => {
|
|
const styles = useStyles()
|
|
|
|
return (
|
|
<div className={combineClasses([styles.root, className])}>
|
|
<code className={styles.code}>{code}</code>
|
|
<CopyButton
|
|
text={code}
|
|
tooltipTitle={tooltipTitle}
|
|
buttonClassName={combineClasses([styles.button, buttonClassName])}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
background: "hsl(223, 27%, 3%)",
|
|
border: `1px solid ${theme.palette.divider}`,
|
|
color: theme.palette.primary.contrastText,
|
|
fontFamily: MONOSPACE_FONT_FAMILY,
|
|
fontSize: 14,
|
|
borderRadius: theme.shape.borderRadius,
|
|
padding: theme.spacing(0.5),
|
|
},
|
|
code: {
|
|
padding: `
|
|
${theme.spacing(0.5)}px
|
|
${theme.spacing(0.75)}px
|
|
${theme.spacing(0.5)}px
|
|
${theme.spacing(2)}px
|
|
`,
|
|
whiteSpace: "nowrap",
|
|
width: "100%",
|
|
overflowX: "auto",
|
|
// Have a better area to display the scrollbar
|
|
height: 42,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
},
|
|
button: {
|
|
border: 0,
|
|
minWidth: 42,
|
|
minHeight: 42,
|
|
borderRadius: theme.shape.borderRadius,
|
|
},
|
|
}))
|