mirror of
https://github.com/coder/coder.git
synced 2025-07-10 23:53:15 +00:00
d8e530e1ec
This refactoring re-organizes the `site` folder to have a nested `src` folder. Originally, [we wanted to keep the directory structure shallow](https://github.com/coder/coder/pull/8#issuecomment-1009578910) - but there were two points that motivated this change to introduce the `src` level. 1. We have several non-`src` folders now (`e2e`, `static`, `html_templates`, `.storybook`) 2. Having a `src` folder makes it easier to run XState Typegen So given those two data points - I believe it makes sense to revisit that and introduce a `src` folder.
39 lines
938 B
TypeScript
39 lines
938 B
TypeScript
import { makeStyles } from "@material-ui/core/styles"
|
|
import React from "react"
|
|
import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
|
|
|
|
import { CopyButton } from "../Button"
|
|
|
|
export interface CodeExampleProps {
|
|
code: string
|
|
}
|
|
|
|
/**
|
|
* Component to show single-line code examples, with a copy button
|
|
*/
|
|
export const CodeExample: React.FC<CodeExampleProps> = ({ code }) => {
|
|
const styles = useStyles()
|
|
|
|
return (
|
|
<div className={styles.root}>
|
|
<code>{code}</code>
|
|
<CopyButton text={code} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
background: theme.palette.background.default,
|
|
color: theme.palette.codeBlock.contrastText,
|
|
fontFamily: MONOSPACE_FONT_FAMILY,
|
|
fontSize: 13,
|
|
padding: theme.spacing(2),
|
|
borderRadius: theme.shape.borderRadius,
|
|
},
|
|
}))
|