# post-carousel/4.0.4/src/components/componentsTopControl/ComponentsTopSection.js

Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News, version 4.0.4. 39 lines.

- Page: https://pluginprobe.com/plugins/post-carousel/4.0.4/code/src/components/componentsTopControl/ComponentsTopSection.js
- Raw: https://pluginprobe.com/plugins/post-carousel/4.0.4/raw/src/components/componentsTopControl/ComponentsTopSection.js
- Modified: 2026-04-24T11:48:54+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/post-carousel/4.0.4/code/src/components/componentsTopControl/ComponentsTopSection.js#L10-L20`.

```javascript
import { memo } from "@wordpress/element";
import Responsive from "../responsive/responsive";
import { ResetButton, Units } from "../utility";

const ComponentsTopSection = ({
	label,
	units = false,
	attributes,
	setAttributes,
	attributesKey = "",
	onReset = false,
	onUnitChange,
}) => {
	return (
		<div className="sp-smart-post-header-control sp-mb-8px">
			<div className="sp-smart-post-header-control-left">
				<span className="sp-smart-post-component-title">
					{label}
				</span>
				{attributes?.device && <Responsive />}
			</div>
			{units && (
				<div className="sp-smart-post-header-control-right">
					{onReset && <ResetButton onClick={() => onReset()} />}
					<Units
						attributes={attributes}
						setAttributes={setAttributes}
						attributesKey={attributesKey}
						units={units}
						onUnitChange={onUnitChange}
					/>
				</div>
			)}
		</div>
	);
};

export default memo(ComponentsTopSection);

```