mirror of
https://github.com/coder/coder.git
synced 2025-07-12 00:14:10 +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.
69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
import { makeStyles } from "@material-ui/core/styles"
|
|
import Button from "@material-ui/core/Button"
|
|
import Tooltip from "@material-ui/core/Tooltip"
|
|
import Check from "@material-ui/icons/Check"
|
|
import React, { useState } from "react"
|
|
import { FileCopy } from "../Icons"
|
|
|
|
interface CopyButtonProps {
|
|
text: string
|
|
className?: string
|
|
}
|
|
|
|
/**
|
|
* Copy button used inside the CodeBlock component internally
|
|
*/
|
|
export const CopyButton: React.FC<CopyButtonProps> = ({ className = "", text }) => {
|
|
const styles = useStyles()
|
|
const [isCopied, setIsCopied] = useState<boolean>(false)
|
|
|
|
const copyToClipboard = async (): Promise<void> => {
|
|
try {
|
|
await window.navigator.clipboard.writeText(text)
|
|
setIsCopied(true)
|
|
|
|
window.setTimeout(() => {
|
|
setIsCopied(false)
|
|
}, 1000)
|
|
} catch (err) {
|
|
const wrappedErr = new Error("copyToClipboard: failed to copy text to clipboard")
|
|
if (err instanceof Error) {
|
|
wrappedErr.stack = err.stack
|
|
}
|
|
console.error(wrappedErr)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Tooltip title="Copy to Clipboard" placement="top">
|
|
<div className={`${styles.copyButtonWrapper} ${className}`}>
|
|
<Button className={styles.copyButton} onClick={copyToClipboard} size="small">
|
|
{isCopied ? <Check className={styles.fileCopyIcon} /> : <FileCopy className={styles.fileCopyIcon} />}
|
|
</Button>
|
|
</div>
|
|
</Tooltip>
|
|
)
|
|
}
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
copyButtonWrapper: {
|
|
display: "flex",
|
|
marginLeft: theme.spacing(1),
|
|
},
|
|
copyButton: {
|
|
borderRadius: 7,
|
|
background: theme.palette.codeBlock.button.main,
|
|
color: theme.palette.codeBlock.button.contrastText,
|
|
padding: theme.spacing(0.85),
|
|
minWidth: 32,
|
|
|
|
"&:hover": {
|
|
background: theme.palette.codeBlock.button.hover,
|
|
},
|
|
},
|
|
fileCopyIcon: {
|
|
width: 20,
|
|
height: 20,
|
|
},
|
|
}))
|