diff --git a/beta/src/components/Icon/IconCopy.tsx b/beta/src/components/Icon/IconCopy.tsx new file mode 100644 index 000000000..552b30c6f --- /dev/null +++ b/beta/src/components/Icon/IconCopy.tsx @@ -0,0 +1,34 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import * as React from 'react'; + +export const IconCopy = React.memo( + function IconCopy({className}) { + return ( + + {' '} + + + ); + } +); + +IconCopy.displayName = 'IconCopy'; diff --git a/beta/src/components/MDX/TerminalBlock.tsx b/beta/src/components/MDX/TerminalBlock.tsx index aebcb11a9..83804b62d 100644 --- a/beta/src/components/MDX/TerminalBlock.tsx +++ b/beta/src/components/MDX/TerminalBlock.tsx @@ -4,6 +4,7 @@ import * as React from 'react'; import {IconTerminal} from '../Icon/IconTerminal'; +import {IconCopy} from 'components/Icon/IconCopy'; type LogLevel = 'info' | 'warning' | 'error'; @@ -34,13 +35,36 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) { message = children.props.children; } + const [copied, setCopied] = React.useState(false); + React.useEffect(() => { + if (!copied) { + return; + } else { + const timer = setTimeout(() => { + setCopied(false); + }, 2000); + return () => clearTimeout(timer); + } + }, [copied]); + return ( -
+
-
- Terminal +
+
+ Terminal +
+
+ +