Popover

Preview

Usage

import { Button } from '@vitnode/core/components/ui/button'
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from '@vitnode/core/components/ui/popover'

<Popover>
  <PopoverTrigger render={<Button variant="outline">Invite</Button>} />
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Invite friends</PopoverTitle>
      <PopoverDescription>The link works for 7 days.</PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>

PopoverContent is w-72 with a gap-4 column, so stacked children space themselves. Override the width with className.

With a form

Drop an AutoForm in for quick edits. Control open so you can close it after a successful submit.

const [open, setOpen] = React.useState(false)

<Popover onOpenChange={setOpen} open={open}>
  <PopoverTrigger render={<Button variant="outline">Add link</Button>} />
  <PopoverContent align="start" className="w-80">
    <AutoForm
      fields={fields}
      formSchema={formSchema}
      onSubmit={values => {
        insertLink(values)
        setOpen(false)
      }}
    />
  </PopoverContent>
</Popover>