ui Architecture Docs
Home / File/ alert-dialog-demo.tsx — ui Source File

alert-dialog-demo.tsx — ui Source File

Architecture documentation for alert-dialog-demo.tsx, a tsx file in the ui codebase. 3 imports, 1 dependents.

File tsx DocumentationAtlas Changelog 3 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  c0c3b414_524e_0d34_6d0c_40f560e9d09b["alert-dialog-demo.tsx"]
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  c0c3b414_524e_0d34_6d0c_40f560e9d09b --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  22caac49_069c_c355_0aca_120ba055a229["alert-dialog"]
  c0c3b414_524e_0d34_6d0c_40f560e9d09b --> 22caac49_069c_c355_0aca_120ba055a229
  57e86e45_ac6e_7278_be08_9092724e8401["button"]
  c0c3b414_524e_0d34_6d0c_40f560e9d09b --> 57e86e45_ac6e_7278_be08_9092724e8401
  1c2403dc_4584_9f39_4e98_855a7de18bd1["component-registry.ts"]
  1c2403dc_4584_9f39_4e98_855a7de18bd1 --> c0c3b414_524e_0d34_6d0c_40f560e9d09b
  style c0c3b414_524e_0d34_6d0c_40f560e9d09b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { TrashIcon } from "lucide-react"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/registry/new-york-v4/ui/alert-dialog"
import { Button } from "@/registry/new-york-v4/ui/button"

export function AlertDialogDemo() {
  return (
    <div className="flex flex-wrap gap-4">
      <AlertDialog>
        <AlertDialogTrigger asChild>
          <Button variant="outline">Default</Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete your
              account and remove your data from our servers.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction>Continue</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
      <AlertDialog>
        <AlertDialogTrigger asChild>
          <Button variant="outline">With Media</Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogMedia>
              <TrashIcon className="size-8" />
            </AlertDialogMedia>
            <AlertDialogTitle>Delete this item?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete the
              item from your account.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
      <AlertDialog>
        <AlertDialogTrigger asChild>
          <Button variant="outline">Small Size</Button>
        </AlertDialogTrigger>
        <AlertDialogContent size="sm">
          <AlertDialogHeader>
            <AlertDialogMedia>
              <TrashIcon className="size-8" />
            </AlertDialogMedia>
            <AlertDialogTitle>Delete this item?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}

Domain

Subdomains

Functions

Dependencies

  • alert-dialog
  • button
  • lucide-react

Imported By

Source

Frequently Asked Questions

What does alert-dialog-demo.tsx do?
alert-dialog-demo.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, Changelog subdomain.
What functions are defined in alert-dialog-demo.tsx?
alert-dialog-demo.tsx defines 1 function(s): AlertDialogDemo.
What does alert-dialog-demo.tsx depend on?
alert-dialog-demo.tsx imports 3 module(s): alert-dialog, button, lucide-react.
What files import alert-dialog-demo.tsx?
alert-dialog-demo.tsx is imported by 1 file(s): component-registry.ts.
Where is alert-dialog-demo.tsx in the architecture?
alert-dialog-demo.tsx is located at apps/v4/app/(internal)/sink/components/alert-dialog-demo.tsx (domain: DocumentationAtlas, subdomain: Changelog, directory: apps/v4/app/(internal)/sink/components).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free