glide-design-system/src/stories/modal/Modal.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import { useState } from 'react'
import { Button } from '../../lib/components/button/Button'
import { Modal as ModalComponent } from '../../lib'
import { ModalTitle } from '../../lib/components/modal/ModalTitle'
import { ModalContent } from '../../lib/components/modal/ModalContent'
import { ModalActions } from '../../lib/components/modal/ModalActions'

/**
 *  The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.
 */
export const Modal = ({ open }) => {
  const [isOpen, setIsOpen] = useState(false)

  const handleModal = () => {
    setIsOpen(!isOpen)
  }
  const handleClose = () => {
    setIsOpen(false)
  }
  return (
    <>
      <Button
        primary={true}
        size="medium"
        label="openModal"
        onClick={handleModal}
      >
        Open Modal
      </Button>
      <ModalComponent open={isOpen ? isOpen : open} onClose={handleClose}>
        <ModalTitle onclick={handleClose}>Title</ModalTitle>
        <ModalContent>
          <h3>Hello world!</h3>
        </ModalContent>
        <ModalActions style={{ justifyContent: 'right', display: 'flex' }}>
          <Button color="secondary" onClick={handleClose}>
            Cancel
          </Button>
          <Button onClick={() => {}}>Submit</Button>
        </ModalActions>
      </ModalComponent>
    </>
  )
}