Modal / Dialog

import {
  Modal,
  ModalContent,
  ModalDescription,
  ModalFooter,
  ModalHeader,
  ModalTitle,
  ModalTrigger,
} from "@araf-ds/core"

export default function Example() {
  const [open, setOpen] = useState(false)
  return (
    <Modal open={open} onOpenChange={setOpen}>
      <ModalTrigger asChild>
        <Button>Edit profile</Button>
      </ModalTrigger>
      <ModalContent>
        <ModalHeader>
          <ModalTitle>Edit profile</ModalTitle>
          <ModalDescription>Update your display name and bio.</ModalDescription>
        </ModalHeader>
        <div className="px-6 py-4">
          <Input label="Display name" defaultValue="Ahmad Dani" />
        </div>
        <ModalFooter>
          <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
          <Button>Save changes</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  )
}

<Modal open={open} onOpenChange={setOpen}>
  <ModalContent>
    <ModalHeader>
      <ModalTitle>Edit profile</ModalTitle>
      <ModalDescription>Update your display name and bio.</ModalDescription>
    </ModalHeader>
    <div className="px-6 py-4">
      <Input label="Display name" defaultValue="Ahmad Dani" />
    </div>
    <ModalFooter>
      <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
      <Button>Save changes</Button>
    </ModalFooter>
  </ModalContent>
</Modal>

<Modal open={open} onOpenChange={setOpen}>
  <ModalContent iconVariant="warning" icon={<AlertTriangleIcon />}>
    <ModalHeader>
      <ModalTitle>Unpublish page?</ModalTitle>
      <ModalDescription>This page will no longer be visible to users.</ModalDescription>
    </ModalHeader>
    <ModalFooter>
      <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
      <Button variant="warning">Unpublish</Button>
    </ModalFooter>
  </ModalContent>
</Modal>

<Modal open={open} onOpenChange={setOpen}>
  <ModalContent iconVariant="destructive" icon={<TrashIcon />}>
    <ModalHeader>
      <ModalTitle>Delete account?</ModalTitle>
      <ModalDescription>All your data will be permanently deleted. This cannot be undone.</ModalDescription>
    </ModalHeader>
    <ModalFooter>
      <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
      <Button variant="destructive">Delete account</Button>
    </ModalFooter>
  </ModalContent>
</Modal>