Files
coder/site/components/CodeExample/CodeExample.tsx
Bryan df13fef161 fix: Remove 'Create Project' button, replace with CLI prompt (#245)
For black-triangle and alpha builds, we won't be able to create projects in the UI, because they require collecting and tar'ing a set of assets associated with the project - so the CLI is going to be our entry point for creating projects.

This shifts the UI to remove the 'Create Project' button, and adds a prompt to copy a command to run.

__Before:__
<img width="1134" alt="image" src="https://user-images.githubusercontent.com/88213859/153534269-58dc95bd-0417-4bed-8e62-e2b6f479da61.png">

__After:__
![2022-02-10 19 38 01](https://user-images.githubusercontent.com/88213859/153534227-d22bd786-8c43-4858-bda6-3d9d1d614711.gif)
2022-02-10 21:37:58 -08:00

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