alert-dialog.tsx 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. import * as React from "react"
  2. import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
  3. import { cn } from "@/lib/utils"
  4. import { buttonVariants } from "@/components/ui/button"
  5. const AlertDialog = AlertDialogPrimitive.Root
  6. const AlertDialogTrigger = AlertDialogPrimitive.Trigger
  7. const AlertDialogPortal = AlertDialogPrimitive.Portal
  8. const AlertDialogOverlay = React.forwardRef<
  9. React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
  10. React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
  11. >(({ className, ...props }, ref) => (
  12. <AlertDialogPrimitive.Overlay
  13. className={cn(
  14. "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",
  15. className
  16. )}
  17. {...props}
  18. ref={ref}
  19. />
  20. ))
  21. AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
  22. const AlertDialogContent = React.forwardRef<
  23. React.ElementRef<typeof AlertDialogPrimitive.Content>,
  24. React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
  25. >(({ className, ...props }, ref) => (
  26. <AlertDialogPortal>
  27. <AlertDialogOverlay />
  28. <AlertDialogPrimitive.Content
  29. ref={ref}
  30. className={cn(
  31. "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",
  32. className
  33. )}
  34. {...props}
  35. />
  36. </AlertDialogPortal>
  37. ))
  38. AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
  39. const AlertDialogHeader = ({
  40. className,
  41. ...props
  42. }: React.HTMLAttributes<HTMLDivElement>) => (
  43. <div
  44. className={cn(
  45. "flex flex-col space-y-2 text-center sm:text-left",
  46. className
  47. )}
  48. {...props}
  49. />
  50. )
  51. AlertDialogHeader.displayName = "AlertDialogHeader"
  52. const AlertDialogFooter = ({
  53. className,
  54. ...props
  55. }: React.HTMLAttributes<HTMLDivElement>) => (
  56. <div
  57. className={cn(
  58. "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
  59. className
  60. )}
  61. {...props}
  62. />
  63. )
  64. AlertDialogFooter.displayName = "AlertDialogFooter"
  65. const AlertDialogTitle = React.forwardRef<
  66. React.ElementRef<typeof AlertDialogPrimitive.Title>,
  67. React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
  68. >(({ className, ...props }, ref) => (
  69. <AlertDialogPrimitive.Title
  70. ref={ref}
  71. className={cn("text-lg font-semibold", className)}
  72. {...props}
  73. />
  74. ))
  75. AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
  76. const AlertDialogDescription = React.forwardRef<
  77. React.ElementRef<typeof AlertDialogPrimitive.Description>,
  78. React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
  79. >(({ className, ...props }, ref) => (
  80. <AlertDialogPrimitive.Description
  81. ref={ref}
  82. className={cn("text-sm text-muted-foreground", className)}
  83. {...props}
  84. />
  85. ))
  86. AlertDialogDescription.displayName =
  87. AlertDialogPrimitive.Description.displayName
  88. const AlertDialogAction = React.forwardRef<
  89. React.ElementRef<typeof AlertDialogPrimitive.Action>,
  90. React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
  91. >(({ className, ...props }, ref) => (
  92. <AlertDialogPrimitive.Action
  93. ref={ref}
  94. className={cn(buttonVariants(), className)}
  95. {...props}
  96. />
  97. ))
  98. AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
  99. const AlertDialogCancel = React.forwardRef<
  100. React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
  101. React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
  102. >(({ className, ...props }, ref) => (
  103. <AlertDialogPrimitive.Cancel
  104. ref={ref}
  105. className={cn(
  106. buttonVariants({ variant: "outline" }),
  107. "mt-2 sm:mt-0",
  108. className
  109. )}
  110. {...props}
  111. />
  112. ))
  113. AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
  114. export {
  115. AlertDialog,
  116. AlertDialogPortal,
  117. AlertDialogOverlay,
  118. AlertDialogTrigger,
  119. AlertDialogContent,
  120. AlertDialogHeader,
  121. AlertDialogFooter,
  122. AlertDialogTitle,
  123. AlertDialogDescription,
  124. AlertDialogAction,
  125. AlertDialogCancel,
  126. }