84 lines
2.7 KiB
JavaScript
84 lines
2.7 KiB
JavaScript
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
import { motion } from 'framer-motion';
|
|
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, children, ...props }) {
|
|
return (
|
|
<AlertDialogPortal>
|
|
<AlertDialogOverlay />
|
|
<AlertDialogPrimitive.Content
|
|
asChild
|
|
role="dialog"
|
|
aria-modal="true"
|
|
{...props}
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, x: '-50%', y: '-48%', scale: 0.98 }}
|
|
animate={{ opacity: 1, x: '-50%', y: '-50%', scale: 1 }}
|
|
exit={{ opacity: 0, x: '-50%', y: '-48%', scale: 0.98 }}
|
|
transition={{ duration: 0.16, ease: [0.22, 1, 0.36, 1] }}
|
|
className={cn(
|
|
'fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-1rem)] max-w-md max-h-[calc(100svh-1rem)] gap-4 overflow-y-auto rounded-2xl border border-border/70 bg-card p-4 text-card-foreground shadow-xl duration-200 sm:w-full sm:max-h-[calc(100svh-2rem)] sm:p-6',
|
|
className
|
|
)}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
</AlertDialogPrimitive.Content>
|
|
</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,
|
|
};
|