mirror of https://github.com/coder/coder.git
69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
import { makeStyles } from "@mui/styles";
|
|
import { FC } from "react";
|
|
import { MONOSPACE_FONT_FAMILY } from "../../theme/constants";
|
|
import { combineClasses } from "../../utils/combineClasses";
|
|
import { CopyButton } from "../CopyButton/CopyButton";
|
|
import { Theme } from "@mui/material/styles";
|
|
|
|
export interface CodeExampleProps {
|
|
code: string;
|
|
className?: string;
|
|
buttonClassName?: string;
|
|
tooltipTitle?: string;
|
|
inline?: boolean;
|
|
password?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Component to show single-line code examples, with a copy button
|
|
*/
|
|
export const CodeExample: FC<React.PropsWithChildren<CodeExampleProps>> = ({
|
|
code,
|
|
className,
|
|
buttonClassName,
|
|
tooltipTitle,
|
|
inline,
|
|
}) => {
|
|
const styles = useStyles({ inline: inline });
|
|
|
|
return (
|
|
<div className={combineClasses([styles.root, className])}>
|
|
<code className={styles.code}>{code}</code>
|
|
<CopyButton
|
|
text={code}
|
|
tooltipTitle={tooltipTitle}
|
|
buttonClassName={buttonClassName}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface styleProps {
|
|
inline?: boolean;
|
|
password?: boolean;
|
|
}
|
|
|
|
const useStyles = makeStyles<Theme, styleProps>((theme) => ({
|
|
root: (props) => ({
|
|
display: props.inline ? "inline-flex" : "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
background: props.inline ? "rgb(0 0 0 / 30%)" : "hsl(223, 27%, 3%)",
|
|
border: props.inline ? undefined : `1px solid ${theme.palette.divider}`,
|
|
color: theme.palette.primary.contrastText,
|
|
fontFamily: MONOSPACE_FONT_FAMILY,
|
|
fontSize: 14,
|
|
borderRadius: theme.shape.borderRadius,
|
|
padding: theme.spacing(1),
|
|
lineHeight: "150%",
|
|
}),
|
|
code: {
|
|
padding: theme.spacing(0, 1),
|
|
width: "100%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
wordBreak: "break-all",
|
|
"-webkit-text-security": (props) => (props.password ? "disc" : undefined),
|
|
},
|
|
}));
|