Modal

import { Modal, Button } from "@nili/ui"

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

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open</Button>

      <Modal
        open={open}
        onOpenChange={setOpen}
        title="Invite a teammate"
        description="They will get an email with a link to join."
        closeLabel="Close"
        footer={
          <>
            <Button appearance="stroke" onClick={() => setOpen(false)}>Cancel</Button>
            <Button onClick={() => setOpen(false)}>Send invite</Button>
          </>
        }
      >
        <TextInput label={t('invite.email')} placeholder="hello@nili.design" />
      </Modal>
    </>
  )
}

import { Modal } from "@nili/ui"

export function Example() {
  return (
    <>
      <Modal size="sm" … />
      <Modal size="md" … />
      <Modal size="lg" … />
      <Modal size="xl" … />
    </>
  )
}

import { Modal, Icon } from "@nili/ui"
import { RiDeleteBinLine } from "@remixicon/react"

export function Example() {
  return (
    <Modal
      open={open}
      onOpenChange={setOpen}
      alignment="vertical"
      status="error"
      icon={<Icon icon={RiDeleteBinLine} />}
      title="Delete this project?"
      description="This cannot be undone. Everything in it will be removed."
      stretchFooter
      footer={
        <>
          <Button appearance="stroke" onClick={close}>Cancel</Button>
          <Button color="error" onClick={close}>Delete</Button>
        </>
      }
    />
  )
}

import { StatusModal, Button } from "@nili/ui"

export function Example() {
  return (
    <StatusModal
      open={open}
      onOpenChange={setOpen}
      status="success"
      alignment="vertical"
      title="Payment received"
      description="We have emailed you a receipt."
      stretchFooter
      footer={<Button onClick={close}>Done</Button>}
    />
  )
}

import { Modal } from "@nili/ui"

export function Example() {
  return (
    <Modal
      open={open}
      onOpenChange={setOpen}
      closeOnOutsideClick={false}
      closeOnEscape={false}
      showClose
      closeLabel="Close"
      title="Unsaved changes"
      …
    />
  )
}