Files
coder/site/src/components/CodeExample/CodeExample.tsx
T
Kyle Carberry 22ec366535 feat: Redesign workspaces page (#1450)
* feat: Improve navbar to be more compact

The navbar was unnecessarily large before, which made
the UI feel a bit bloaty from my perspective.

* Attempt to remove overrides

* Update theme

* Add text field

* Update theme to dark!

* Fix import ordering

* Fix page location

* Fix requested changes

* Add storybook for workspaces page view

* Add empty view

* Add tests for empty view

* Remove templates page

* Fix local port

* Remove templates from nav

* Fix e2e test

* Remove time.ts

* Remove dep

* Add background color to margins

* Merge status checking from workspace page

* Fix requested changes

* Fix workspace status tests
2022-05-16 16:52:54 -05:00

38 lines
950 B
TypeScript

import { makeStyles } from "@material-ui/core/styles"
import React from "react"
import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
import { CopyButton } from "../CopyButton/CopyButton"
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.primary.contrastText,
fontFamily: MONOSPACE_FONT_FAMILY,
fontSize: 13,
padding: theme.spacing(2),
borderRadius: theme.shape.borderRadius,
},
}))