Modal family

'use client';

import { useState } from 'react';
import { Button, ModalBody, ModalFooter, ModalHeader, ModalOverlay, ModalPanel } from '@ai-created/ui';

export function Example() {
  const [open, setOpen] = useState(false);

  if (!open) {
    return <Button onClick={() => setOpen(true)}>Open modal</Button>;
  }

  return (
    <ModalOverlay onClose={() => setOpen(false)}>
      <ModalPanel>
        <ModalHeader heading="Edit project" onClose={() => setOpen(false)} />
        <ModalBody>Modal content belongs here.</ModalBody>
        <ModalFooter>
          <Button onClick={() => setOpen(false)}>Save changes</Button>
        </ModalFooter>
      </ModalPanel>
    </ModalOverlay>
  );
}