71 lines
2.5 KiB
React
71 lines
2.5 KiB
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 AlertDialogCancel = AlertDialogPrimitive.Cancel;
|
||
|
|
const AlertDialogAction = AlertDialogPrimitive.Action;
|
||
|
|
|
||
|
|
function AlertDialogOverlay({ className, ...props }) {
|
||
|
|
return (
|
||
|
|
<AlertDialogPrimitive.Overlay
|
||
|
|
className={cn(
|
||
|
|
'fixed inset-0 z-50 bg-foreground/25 backdrop-blur-sm 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 }) {
|
||
|
|
return (
|
||
|
|
<AlertDialogPortal>
|
||
|
|
<AlertDialogOverlay />
|
||
|
|
<AlertDialogPrimitive.Content
|
||
|
|
className={cn(
|
||
|
|
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-md translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl border border-border/70 bg-card p-6 text-card-foreground shadow-xl 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%]',
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
</AlertDialogPortal>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function AlertDialogHeader({ className, ...props }) {
|
||
|
|
return <div className={cn('flex flex-col gap-2', className)} {...props} />;
|
||
|
|
}
|
||
|
|
|
||
|
|
function AlertDialogFooter({ className, ...props }) {
|
||
|
|
return (
|
||
|
|
<div className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props} />
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function AlertDialogTitle({ className, ...props }) {
|
||
|
|
return (
|
||
|
|
<AlertDialogPrimitive.Title
|
||
|
|
className={cn('text-base font-semibold text-foreground', className)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function AlertDialogDescription({ className, ...props }) {
|
||
|
|
return (
|
||
|
|
<AlertDialogPrimitive.Description
|
||
|
|
className={cn('text-sm text-muted-foreground leading-relaxed', className)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export {
|
||
|
|
AlertDialog, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay,
|
||
|
|
AlertDialogContent, AlertDialogHeader, AlertDialogFooter,
|
||
|
|
AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel,
|
||
|
|
};
|