first commit

2023-11-30 13:20:54 -05:00
commit e9e5c0546c
5833 changed files with 1801865 additions and 0 deletions
@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * WordPress dependencies
+ */
+const {
+	Component,
+	RawHTML,
+} = wp.element;
+
+const {
+	Button,
+	Popover,
+} = wp.components;
+
+/**
+ * Component
+ */
+export default class ComponentImageSelector extends Component {
+	constructor() {
+		super(...arguments);
+	}
+
+	render() {
+		let {
+			className,
+			value,
+		} = this.props;
+
+		const {
+			items,
+			onChange,
+		} = this.props;
+
+		className = classnames(
+			'sight-component-image-selector',
+			className
+		);
+
+		const layouts = Object.keys(items).map((key) => {
+			return {
+				content: <RawHTML>{items[key].icon}</RawHTML>,
+				value: key,
+				label: items[key].name,
+			};
+		});
+
+		return (
+			<div className={className}>
+				{ layouts && layouts.length ? (
+					layouts.map((itemData, i) => {
+						const itemClassName = classnames(
+							'sight-component-image-selector-item',
+							{
+								'sight-component-image-selector-item-active': value === itemData.value,
+							}
+						);
+
+						return (
+							<div
+								key={`sight-component-image-selector-item-${itemData.value}`}
+								className={itemClassName}
+							>
+								<Button
+									onClick={() => {
+										onChange(itemData.value);
+									}}
+								>
+									{itemData.content}
+								</Button>
+								<span>{itemData.label}</span>
+							</div>
+						);
+					})
+				) : null }
+			</div>
+		);
+	}
+}