# code-block-pro/1.18.0/src/editor/components/ButtonsPanel.tsx

Code Block Pro – Beautiful Syntax Highlighting, version 1.18.0. 34 lines.

- Page: https://pluginprobe.com/plugins/code-block-pro/1.18.0/code/src/editor/components/ButtonsPanel.tsx
- Raw: https://pluginprobe.com/plugins/code-block-pro/1.18.0/raw/src/editor/components/ButtonsPanel.tsx
- Modified: 2023-05-29T02:24:30+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-block-pro/1.18.0/code/src/editor/components/ButtonsPanel.tsx#L10-L20`.

```tsx
import { PanelBody, BaseControl, CheckboxControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useThemeStore } from '../../state/theme';
import { AttributesPropsAndSetter } from '../../types';

export const ButtonsPanel = ({
    attributes,
    setAttributes,
}: AttributesPropsAndSetter & { bringAttentionToThemes?: boolean }) => {
    const { updateThemeHistory } = useThemeStore();
    return (
        <PanelBody title={__('Buttons', 'code-block-pro')} initialOpen={false}>
            <BaseControl id="code-block-pro-show-copy-button">
                <CheckboxControl
                    data-cy="copy-button"
                    label={__('Copy Button', 'code-block-pro')}
                    help={__(
                        'Adds a button to copy the code',
                        'code-block-pro',
                    )}
                    checked={attributes.copyButton}
                    onChange={(value) => {
                        setAttributes({ copyButton: value });
                        updateThemeHistory({
                            ...attributes,
                            copyButton: value,
                        });
                    }}
                />
            </BaseControl>
        </PanelBody>
    );
};

```