|
import * as React from 'react' |
|
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog' |
|
|
|
import { cn } from '@/lib/utils' |
|
import { buttonVariants } from '@/components/ui/Button' |
|
|
|
const AlertDialog = AlertDialogPrimitive.Root |
|
|
|
const AlertDialogTrigger = AlertDialogPrimitive.Trigger |
|
|
|
const AlertDialogPortal = AlertDialogPrimitive.Portal |
|
|
|
const AlertDialogOverlay = React.forwardRef< |
|
React.ComponentRef<typeof AlertDialogPrimitive.Overlay>, |
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> |
|
>(({ className, ...props }, ref) => ( |
|
<AlertDialogPrimitive.Overlay |
|
className={cn( |
|
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50', |
|
className |
|
)} |
|
{...props} |
|
ref={ref} |
|
/> |
|
)) |
|
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName |
|
|
|
const AlertDialogContent = React.forwardRef< |
|
React.ComponentRef<typeof AlertDialogPrimitive.Content>, |
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> |
|
>(({ className, ...props }, ref) => ( |
|
<AlertDialogPortal> |
|
<AlertDialogOverlay /> |
|
<AlertDialogPrimitive.Content |
|
ref={ref} |
|
className={cn( |
|
'bg-background 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-top-[48%] data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 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' |
|
|
|
const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => ( |
|
<div |
|
className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} |
|
{...props} |
|
/> |
|
) |
|
AlertDialogFooter.displayName = 'AlertDialogFooter' |
|
|
|
const AlertDialogTitle = React.forwardRef< |
|
React.ComponentRef<typeof AlertDialogPrimitive.Title>, |
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> |
|
>(({ className, ...props }, ref) => ( |
|
<AlertDialogPrimitive.Title |
|
ref={ref} |
|
className={cn('text-lg font-semibold', className)} |
|
{...props} |
|
/> |
|
)) |
|
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName |
|
|
|
const AlertDialogDescription = React.forwardRef< |
|
React.ComponentRef<typeof AlertDialogPrimitive.Description>, |
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> |
|
>(({ className, ...props }, ref) => ( |
|
<AlertDialogPrimitive.Description |
|
ref={ref} |
|
className={cn('text-muted-foreground text-sm', className)} |
|
{...props} |
|
/> |
|
)) |
|
AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName |
|
|
|
const AlertDialogAction = React.forwardRef< |
|
React.ComponentRef<typeof AlertDialogPrimitive.Action>, |
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> |
|
>(({ className, ...props }, ref) => ( |
|
<AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} /> |
|
)) |
|
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName |
|
|
|
const AlertDialogCancel = React.forwardRef< |
|
React.ComponentRef<typeof AlertDialogPrimitive.Cancel>, |
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> |
|
>(({ className, ...props }, ref) => ( |
|
<AlertDialogPrimitive.Cancel |
|
ref={ref} |
|
className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)} |
|
{...props} |
|
/> |
|
)) |
|
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName |
|
|
|
export { |
|
AlertDialog, |
|
AlertDialogPortal, |
|
AlertDialogOverlay, |
|
AlertDialogTrigger, |
|
AlertDialogContent, |
|
AlertDialogHeader, |
|
AlertDialogFooter, |
|
AlertDialogTitle, |
|
AlertDialogDescription, |
|
AlertDialogAction, |
|
AlertDialogCancel |
|
} |
|
|