@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 { system } from '@workday/canvas-tokens-web';
import { PrimaryButton } from '@workday/canvas-kit-react/button';
import { cssVar } from '@workday/canvas-kit-styling';
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: system.color.bg.contrast.default, borderRadius: "m", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", children: [_jsxs("pre", { ref: commandRef, children: [_jsx("span", { style: {
                            color: cssVar(system.color.fg.primary.soft),
                            marginInlineEnd: cssVar(system.space.x2),
                        }, children: command }), _jsx("span", { style: { color: cssVar(system.color.fg.inverse) }, children: packageName })] }), _jsx(PrimaryButton, { variant: "inverse", onClick: handleCopy, size: "small", children: copied ? 'Copied' : 'Copy' })] }));
};