Initial

blocks/components/LCPHTMLModal.js

@@ -0,0 +1,56 @@
+import { useState } from '@wordpress/element';
+import { Button, Modal, TextControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const LCPHTMLModal= () => {
+    // State to control modal visibility and text value
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [textValue, setTextValue] = useState('');
+
+    // Open modal function
+    const openModal = () => setIsModalOpen(true);
+
+    // Close modal function
+    const closeModal = () => setIsModalOpen(false);
+
+    // Handle text change
+    const handleTextChange = (newValue) => {
+        setTextValue(newValue);
+    };
+
+    return (
+        <div>
+            {/* Button to trigger modal */}
+            <Button isPrimary onClick={openModal}>
+                {__('Open Modal', 'lcp')}
+            </Button>
+
+            {/* Modal */}
+            {isModalOpen && (
+                <Modal
+                    title={__('Text Area Modal', 'lcp')}
+                    onRequestClose={closeModal}
+                    className="my-modal"
+                >
+                    {/* Modal content */}
+                    <div>
+                        <TextControl
+                            label={__('Enter your text:', 'lcp')}
+                            value={textValue}
+                            onChange={handleTextChange}
+                            placeholder={__('Type here...', 'lcp')}
+                            style={{ width: '100%', minHeight: '100px' }}
+                        />
+                    </div>
+
+                    {/* Modal footer */}
+                    <div style={{ marginTop: '16px', textAlign: 'right' }}>
+                        <Button onClick={closeModal}>{__('Close', 'lcp')}</Button>
+                    </div>
+                </Modal>
+            )}
+        </div>
+    );
+};
+
+export default LCPHTMLModal;