Alert Dialog

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  Button,
  toast,
} from 'ferry-ui'
import { Trash2 } from 'lucide-react'

export default function AlertDialogHero() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="destructive" icon={<Trash2 />}>
          Delete project
        </Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete this project?</AlertDialogTitle>
          <AlertDialogDescription>
            The project “Billing portal” and all its files are deleted. This cannot be undone.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction variant="destructive-solid" onClick={() => toast.success('Project deleted')}>
            Delete project
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  Button,
  toast,
} from 'ferry-ui'
import { Send } from 'lucide-react'

export default function AlertDialogPrimaryAction() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button icon={<Send />}>Send invoice</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Send invoice INV-2041?</AlertDialogTitle>
          <AlertDialogDescription>
            Acme gets the invoice by email. After that, you cannot edit the invoice.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Not yet</AlertDialogCancel>
          {/* No variant: the action keeps the default `primary` look. */}
          <AlertDialogAction onClick={() => toast.success('Invoice sent')}>Send invoice</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  Button,
} from 'ferry-ui'

export default function AlertDialogButtons() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button>Sign out everywhere</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Sign out of all devices?</AlertDialogTitle>
          <AlertDialogDescription>
            Each other session of your account ends now. You stay signed in on this device.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel variant="ghost" size="md">
            Cancel
          </AlertDialogCancel>
          <AlertDialogAction variant="warning" size="md">
            Sign out everywhere
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogBody,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  Button,
} from 'ferry-ui'

const MEMBERS = [
  { name: 'Maya Chen', email: 'maya@example.com', role: 'Admin' },
  { name: 'Sam Lee', email: 'sam@example.com', role: 'Developer' },
  { name: 'Ada Park', email: 'ada@example.com', role: 'Viewer' },
]

export default function AlertDialogWithBody() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="destructive">Remove 3 members</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Remove 3 members?</AlertDialogTitle>
          <AlertDialogDescription>They lose access to each project of this workspace.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogBody className="gap-0 py-2">
          {MEMBERS.map((member) => (
            <div key={member.email} className="flex items-center justify-between gap-3 border-b py-2 last:border-b-0">
              <div className="flex min-w-0 flex-col">
                <span className="truncate text-[13px] font-medium text-foreground">{member.name}</span>
                <span className="truncate text-xs text-foreground-lighter">{member.email}</span>
              </div>
              <span className="text-xs text-foreground-light">{member.role}</span>
            </div>
          ))}
        </AlertDialogBody>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction variant="destructive-solid">Remove members</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

import * as React from 'react'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  Button,
  toast,
} from 'ferry-ui'

export default function AlertDialogAsync() {
  const [open, setOpen] = React.useState(false)
  const [pending, setPending] = React.useState(false)

  function revoke(event: React.MouseEvent) {
    // Keep the dialog open until the request ends.
    event.preventDefault()
    setPending(true)
    window.setTimeout(() => {
      setPending(false)
      setOpen(false)
      toast.success('API key revoked')
    }, 1200)
  }

  return (
    <AlertDialog
      open={open}
      onOpenChange={(next) => {
        // Escape does not close the dialog while the request runs.
        if (!pending) setOpen(next)
      }}
    >
      <AlertDialogTrigger asChild>
        <Button variant="destructive">Revoke API key</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Revoke this API key?</AlertDialogTitle>
          <AlertDialogDescription>Requests with the key “Analytics export” fail from now on.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
          <AlertDialogAction variant="destructive-solid" loading={pending} onClick={revoke}>
            Revoke key
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}