Modal

import { useState } from 'react'
import { Button } from './Button'
import { Modal, ModalHeader, ModalTitle, ModalDescription, ModalBody, ModalFooter } from './Modal'

export default function App() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div className="p-8 space-y-4">
      <h2 className="text-2xl font-bold mb-4">Modal Example</h2>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <ModalHeader onClose={() => setIsOpen(false)}>
          <ModalTitle>Hello from Sandpack!</ModalTitle>
          <ModalDescription>This modal is rendered inside the playground.</ModalDescription>
        </ModalHeader>
        <ModalBody>
          <p>You can edit the code on the right to see changes live.</p>
          <p className="mt-2">Try changing the modal's content or styling!</p>
        </ModalBody>
        <ModalFooter>
          <Button variant="outline" onClick={() => setIsOpen(false)}>
            Close
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  )
}