feat: inspector-sub-header for new global settings

Author: Arukuen

src/components/index.js

@@ -116,3 +116,4 @@ export { default as Popover } from './popover'
 export { default as HelpTooltip } from './help-tooltip'
 export { default as RichText } from './rich-text'
 export { default as SortablePicker } from './sortable-picker'
+export { default as InspectorSubHeader } from './inspector-sub-header'

src/components/inspector-sub-header/editor.scss

@@ -0,0 +1,19 @@
+.stk-inspector-sub-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 8px;
+	.components-base-control__label {
+		flex: 1;
+		margin: 0;
+	}
+	.stk-inspector-sub-header__trash {
+		color: var(--stk-skin-error);
+	}
+	.stk-inspector-sub-header__reset {
+		color: var(--stk-skin-error);
+		.dashicon {
+			font-size: 12px;
+		}
+	}
+}

src/components/inspector-sub-header/index.js

@@ -0,0 +1,46 @@
+import { i18n } from 'stackable'
+import { Button } from '@wordpress/components'
+import { __ } from '@wordpress/i18n'
+
+const NOOP = () => {}
+
+const InspectorSubHeader = props => {
+	const {
+		onBack = NOOP,
+		onTrash = NOOP,
+		onReset = NOOP,
+		title = '',
+		showTrash = true,
+		showReset = false,
+	} = props
+	return (
+		<div className="stk-inspector-sub-header">
+			<Button
+				icon="arrow-left-alt2"
+				alt={ __( 'Back', i18n ) }
+				onClick={ onBack }
+			/>
+			<h2 className="components-base-control__label">{ title }</h2>
+			{ showTrash && (
+				<Button
+					className="stk-inspector-sub-header__trash"
+					size="small"
+					icon="trash"
+					alt={ __( 'Delete', i18n ) }
+					onTrash={ onTrash }
+				/>
+			) }
+			{ showReset && (
+				<Button
+					className="stk-inspector-sub-header__reset"
+					size="small"
+					icon="image-rotate"
+					alt={ __( 'Reset', i18n ) }
+					onReset={ onReset }
+				/>
+			) }
+		</div>
+	)
+}
+
+export default InspectorSubHeader