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

Documentation components of Canvas Kit components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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 (_jsxs(Flex, { padding: "xs", backgroundColor: colors.licorice500, borderRadius: "m", justifyContent: "space-between", alignItems: "center", flexWrap: 'wrap', children: [_jsxs("pre", { ref: commandRef, children: [_jsx("span", { style: { color: colors.blueberry200 }, children: command }), ' ', _jsx("span", { style: { color: colors.frenchVanilla100 }, children: packageName })] }), _jsx(PrimaryButton, { variant: "inverse", onClick: handleCopy, size: "small", children: copied ? 'Copied' : 'Copy' })] }));
};