# post-carousel/4.0.8/src/components/layouts/layouts.js

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

- Page: https://pluginprobe.com/plugins/post-carousel/4.0.8/code/src/components/layouts/layouts.js
- Raw: https://pluginprobe.com/plugins/post-carousel/4.0.8/raw/src/components/layouts/layouts.js
- Modified: 2026-09-02T10:51:28+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.8/code/src/components/layouts/layouts.js#L10-L20`.

```javascript
import { memo } from "@wordpress/element";
import { RightSymbolIcon } from "../../icons/icons";
import "./editor.scss";
import ProBtn from "../proBtn/proBtn";

const Layout = ({ layout, handleActive, activeLayout, displayActive, proBtnClass = ""}) => {
	const { icon, value, label, type, demoLink } = layout;

	return (
		<div
			onClick={ type !== "pro" ? () => handleActive(value) : null }
			className={`sp-smart-post-layout-card ${type === "pro" ? "sp-smart-pro-layout" : ""} ${value === activeLayout ? "active" : "inactive"}`}
		>
			{value === activeLayout && displayActive && (
				<span className="active-symbol">
					<RightSymbolIcon />
				</span>
			)}
			{type !== "pro" && <div className="sp-smart-layout-img">
				{icon}
			</div>}
			{type === "pro" && <a href={demoLink} rel="noreferrer" target="_blank" className="sp-smart-layout-img">
				{icon}
				<ProBtn proBtnClass={proBtnClass} demoLink={demoLink} />
			</a>}
			{label && <p className="sp-smart-post-layout-title">{label}</p>}
		</div>
	);
};

const Layouts = ({
	attributes,
	setAttributes,
	attributesKey,
	displayActive = false,
	label = "",
	proBtnClass = "",
	showDemoTitle = false,
	grid = 2,
	items,
	onChange = false,
}) => {
	const handleActive = (value) => {
		if (value === attributes) {
			return;
		}
		if (onChange) {
			onChange(value);
		}
		setAttributes({ [attributesKey]: value });
	};

	return (
		<div className="sp-smart-post-layout-picker sp-smart-post-panel-pb">
			{label && <p className="sp-smart-post-component-title">{label}</p>}
			<div className={`sp-smart-post-layouts grid-${grid}`}>
				{items?.map((layout, index) => (
					<Layout
						key={index}
						layout={layout}
						displayActive={displayActive}
						handleActive={handleActive}
						proBtnClass={proBtnClass}
						showDemoTitle={showDemoTitle}
						activeLayout={attributes}
					/>
				))}
			</div>
		</div>
	);
};

export default memo(Layouts);

```