Files
coder/site/src/components/CodeExample/CodeExample.tsx
Kira Pilot e62677efab feat: add audit page title, subtitle, and CLI snippet (#3419)
* resolves #3356

* scaffolded out new audit page header

resolves #3357

* added tests and stories

* run prettier
2022-08-08 21:08:36 -04:00

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,
},
}))