@workday/canvas-kit-docs/dist/es6/mdx/installBlock.js

Documentation components of Canvas Kit components

import React from 'react';
import { Flex } from '@workday/canvas-kit-react/layout';
import { colors } from '@workday/canvas-kit-react/tokens';
import { PrimaryButton } from '@workday/canvas-kit-react/button';
export const InstallBlock = ({ command, packageName }) => {
    const commandRef = React.useRef(null);
    const [copied, setCopied] = React.useState(false);
    React.useEffect(() => {
        setTimeout(() => setCopied(false), 600);
    }, [copied]);
    const handleCopy = () => {
        setCopied(true);
        if (commandRef.current) {
            navigator.clipboard.writeText(commandRef.current.innerText);
        }
    };
    return (React.createElement(Flex, { padding: "xs", backgroundColor: colors.licorice500, borderRadius: "m", justifyContent: "space-between", alignItems: "center", flexWrap: 'wrap' },
        React.createElement("pre", { ref: commandRef },
            React.createElement("span", { style: { color: colors.blueberry200 } }, command),
            ' ',
            React.createElement("span", { style: { color: colors.frenchVanilla100 } }, packageName)),
        React.createElement(PrimaryButton, { variant: "inverse", onClick: handleCopy, size: "small" }, copied ? 'Copied' : 'Copy')));
};