alert-dialog-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-dialog-example",
  "title": "Alert Dialog",
  "registryDependencies": [
    "alert-dialog",
    "button",
    "dialog",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-nova/examples/alert-dialog-example.tsx",
      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-nova/ui/alert-dialog\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-nova/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button variant=\"outline\">Small</Button>} />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default (Media)</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n                remixicon=\"RiBluetoothLine\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Small (Media)</Button>}\n        />\n\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n                remixicon=\"RiBluetoothLine\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"destructive\">Delete Chat</Button>}\n        />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Open Alert Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}