49 lines
3.0 KiB
TypeScript
49 lines
3.0 KiB
TypeScript
import * as React from 'react'
|
|
import { AlertDialog as AlertDialogPrimitive } from 'radix-ui'
|
|
|
|
import { Button } from '@/components/ui/button'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const AlertDialog = AlertDialogPrimitive.Root
|
|
const AlertDialogTrigger = AlertDialogPrimitive.Trigger
|
|
const AlertDialogPortal = AlertDialogPrimitive.Portal
|
|
|
|
function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
|
|
return <AlertDialogPrimitive.Overlay data-slot="alert-dialog-overlay" className={cn('fixed inset-0 z-50 bg-black/20 backdrop-blur-[1px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', className)} {...props} />
|
|
}
|
|
|
|
function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
|
|
return (
|
|
<AlertDialogPortal>
|
|
<AlertDialogOverlay />
|
|
<AlertDialogPrimitive.Content data-slot="alert-dialog-content" className={cn('fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2rem)] max-w-sm -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl border bg-popover p-5 text-popover-foreground shadow-lg outline-none 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', className)} {...props} />
|
|
</AlertDialogPortal>
|
|
)
|
|
}
|
|
|
|
function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return <div data-slot="alert-dialog-header" className={cn('flex flex-col gap-2 text-center sm:text-left', className)} {...props} />
|
|
}
|
|
|
|
function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return <div data-slot="alert-dialog-footer" className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props} />
|
|
}
|
|
|
|
function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
|
|
return <AlertDialogPrimitive.Title data-slot="alert-dialog-title" className={cn('text-base font-semibold', className)} {...props} />
|
|
}
|
|
|
|
function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
|
|
return <AlertDialogPrimitive.Description data-slot="alert-dialog-description" className={cn('text-sm text-muted-foreground', className)} {...props} />
|
|
}
|
|
|
|
function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
|
|
return <Button asChild><AlertDialogPrimitive.Action data-slot="alert-dialog-action" className={className} {...props} /></Button>
|
|
}
|
|
|
|
function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
|
|
return <Button asChild variant="outline"><AlertDialogPrimitive.Cancel data-slot="alert-dialog-cancel" className={className} {...props} /></Button>
|
|
}
|
|
|
|
export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger }
|