Modal Component

A simple modal component implementation.

jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Modal({ isOpen, onClose }) {
  if (!isOpen) return null;

  return (
    <div style={modalStyle}>
      <h2>Modal Title</h2>
      <p>This is a simple modal!</p>
      <button onClick={onClose}>Close</button>
    </div>
  );
}

const modalStyle = {
  position: 'fixed',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  padding: '20px',
  backgroundColor: 'white',
  boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
};

function App() {
  const [isModalOpen, setModalOpen] = useState(false);

  return (
    <div>
      <h1>Modal Example</h1>
      <button onClick={() => setModalOpen(true)}>Open Modal</button>
      <Modal isOpen={isModalOpen} onClose={() => setModalOpen(false)} />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));