mirror of
https://github.com/coder/coder.git
synced 2026-10-24 01:26:25 +08:00
Bryan
e3089e99d9
This ports over a component from v1 that is needed for the v2 workspace page, and adds theme colors for it: <img width="772" alt="Screen Shot 2022-02-05 at 10 39 28 AM" src="https://user-images.githubusercontent.com/88213859/152654601-bab5acca-2e4a-4d53-890f-067a3b864040.png"> Component in storybook:  By bringing in these components ahead of time - it'll make the workspaces page PR smaller.
39 lines
959 B
TypeScript
39 lines
959 B
TypeScript
import { makeStyles } from "@material-ui/core/styles"
|
|
import React from "react"
|
|
|
|
export interface CodeBlockProps {
|
|
lines: string[]
|
|
}
|
|
|
|
export const CodeBlock: React.FC<CodeBlockProps> = ({ lines }) => {
|
|
const styles = useStyles()
|
|
|
|
return (
|
|
<div className={styles.root}>
|
|
{lines.map((line, idx) => (
|
|
<div className={styles.line} key={idx}>
|
|
{line}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
const MONOSPACE_FONT_FAMILY =
|
|
"'Fira Code', 'Lucida Console', 'Lucida Sans Typewriter', 'Liberation Mono', 'Monaco', 'Courier New', Courier, monospace"
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
minHeight: 156,
|
|
background: theme.palette.background.default,
|
|
color: theme.palette.codeBlock.contrastText,
|
|
fontFamily: MONOSPACE_FONT_FAMILY,
|
|
fontSize: 13,
|
|
wordBreak: "break-all",
|
|
padding: theme.spacing(2),
|
|
borderRadius: theme.shape.borderRadius,
|
|
},
|
|
line: {
|
|
whiteSpace: "pre-wrap",
|
|
},
|
|
}))
|