BlockPlaceholders.jsx

import {__} from "@wordpress/i18n";
import {PanelBody} from "@wordpress/components";
import Placeholder from "./Placeholder";

export default function BlockPlaceholders({placeholders, children}) {
	return (
		<PanelBody title={__('Placeholders', 'flexible-invoices-core')}>
			{children && <p className='fi-placeholders-list-description'>{children}</p>}
			{
				placeholders.map((placeholder) => {
					return <Placeholder key={placeholder.label} label={placeholder.label}>{placeholder.description}</Placeholder>
				})
			}
		</PanelBody>
	);
}