# ghostkit/3.7.0/gutenberg/components/pro-note/index.js

Block Animations, Motion & Scroll Effects – Ghost Kit, version 3.7.0. 49 lines.

- Page: https://pluginprobe.com/plugins/ghostkit/3.7.0/code/gutenberg/components/pro-note/index.js
- Raw: https://pluginprobe.com/plugins/ghostkit/3.7.0/raw/gutenberg/components/pro-note/index.js
- Modified: 2026-08-26T18:35:36+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/ghostkit/3.7.0/code/gutenberg/components/pro-note/index.js#L10-L20`.

```javascript
import { Button } from '@wordpress/components';
import { useState } from '@wordpress/element';
import classnames from 'classnames/dedupe';

import getIcon from '../../utils/get-icon';

export default function ProNote(props) {
	const { title, children } = props;

	const [collapsed, setCollapsed] = useState(props.collapsed);

	return (
		<div
			className={classnames(
				'ghostkit-pro-component-note',
				collapsed && 'ghostkit-pro-component-note-collapsed'
			)}
		>
			<div className="ghostkit-pro-component-note-inner">
				{title && <h3>{title}</h3>}
				{collapsed && (
					<Button
						onClick={() => {
							setCollapsed(!collapsed);
						}}
					>
						{getIcon('icon-arrow-right')}
					</Button>
				)}
				{!collapsed && children && <div>{children}</div>}
			</div>
		</div>
	);
}

/**
 * Button for ProNote
 * @param props
 */
ProNote.Button = function ProNoteButton(props) {
	const { children } = props;

	return (
		<a className="ghostkit-pro-component-note-button" {...props}>
			{children}
		</a>
	);
};

```