Home / File/ alert-dialog.tsx — ui Source File

alert-dialog.tsx — ui Source File

Architecture documentation for alert-dialog.tsx, a tsx file in the ui codebase. 4 imports, 0 dependents.

File tsx ComponentRegistry ChartRegistry 4 imports 8 functions

Entity Profile

Dependency Diagram

graph LR
  f108278a_1476_e57a_1621_e5c29823a627["alert-dialog.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  f108278a_1476_e57a_1621_e5c29823a627 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  86513eca_f4b1_a833_4824_6a2331061fab["react-alert-dialog"]
  f108278a_1476_e57a_1621_e5c29823a627 --> 86513eca_f4b1_a833_4824_6a2331061fab
  79081a1f_55a3_945a_fb8c_d53d6d3eab81["utils"]
  f108278a_1476_e57a_1621_e5c29823a627 --> 79081a1f_55a3_945a_fb8c_d53d6d3eab81
  aa2f3ec6_f291_3763_88ec_65a3f5ad5939["button"]
  f108278a_1476_e57a_1621_e5c29823a627 --> aa2f3ec6_f291_3763_88ec_65a3f5ad5939
  style f108278a_1476_e57a_1621_e5c29823a627 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/registry/new-york/ui/button"

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

const AlertDialogPortal = AlertDialogPrimitive.Portal

const AlertDialogOverlay = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Overlay
    className={cn(
      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props}
    ref={ref}
  />
))
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName

const AlertDialogContent = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
>(({ className, ...props }, ref) => (
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className
      )}
      {...props}
    />
  </AlertDialogPortal>
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName

const AlertDialogHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-2 text-center sm:text-left",
      className
    )}
    {...props}
  />
)
AlertDialogHeader.displayName = "AlertDialogHeader"
// ... (82 more lines)

Subdomains

Dependencies

  • button
  • react
  • react-alert-dialog
  • utils

Frequently Asked Questions

What does alert-dialog.tsx do?
alert-dialog.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, ChartRegistry subdomain.
What functions are defined in alert-dialog.tsx?
alert-dialog.tsx defines 8 function(s): AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle.
What does alert-dialog.tsx depend on?
alert-dialog.tsx imports 4 module(s): button, react, react-alert-dialog, utils.
Where is alert-dialog.tsx in the architecture?
alert-dialog.tsx is located at deprecated/www/registry/new-york/ui/alert-dialog.tsx (domain: ComponentRegistry, subdomain: ChartRegistry, directory: deprecated/www/registry/new-york/ui).

Analyze Your Own Codebase

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

Try Supermodel Free