@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 { PrimaryButton } from '@workday/canvas-kit-react/button';
import { Flex } from '@workday/canvas-kit-react/layout';
import { createStyles } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
const blockStyles = createStyles({
    padding: system.padding.xs,
    backgroundColor: system.color.surface.contrast.default,
    borderRadius: system.shape.md,
    justifyContent: 'space-between',
    alignItems: 'center',
    flexWrap: 'wrap',
});
const codeCommandStyles = createStyles({
    color: system.color.fg.info.default,
    marginInlineEnd: system.gap.sm,
});
const codePackageStyles = createStyles({
    color: system.color.fg.inverse,
});
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, { cs: blockStyles, children: [_jsxs("pre", { ref: commandRef, children: [_jsx("span", { className: codeCommandStyles, children: command }), _jsx("span", { className: codePackageStyles, children: packageName })] }), _jsx(PrimaryButton, { variant: "inverse", onClick: handleCopy, size: "small", children: copied ? 'Copied' : 'Copy' })] }));
};