31 lines
1.3 KiB
TypeScript
31 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
import { X } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export const Dialog = DialogPrimitive.Root;
|
|
export const DialogTrigger = DialogPrimitive.Trigger;
|
|
|
|
export function DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>) {
|
|
return (
|
|
<DialogPrimitive.Portal>
|
|
<DialogPrimitive.Overlay className="fixed inset-0 z-[200] bg-black/50 backdrop-blur-[1px]" />
|
|
<DialogPrimitive.Content className={cn('fixed left-1/2 top-1/2 z-[201] w-[min(92vw,520px)] -translate-x-1/2 -translate-y-1/2 rounded-[28px] bg-white p-6 shadow-2xl', className)} {...props}>
|
|
{children}
|
|
<DialogPrimitive.Close className="absolute right-5 top-5 rounded-full p-1 hover:bg-[#f4f5f8]" aria-label="Закрыть">
|
|
<X className="h-4 w-4" />
|
|
</DialogPrimitive.Close>
|
|
</DialogPrimitive.Content>
|
|
</DialogPrimitive.Portal>
|
|
);
|
|
}
|
|
|
|
export function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
|
return <div className={cn('mb-5 flex flex-col gap-1', className)} {...props} />;
|
|
}
|
|
|
|
export function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
|
return <DialogPrimitive.Title className={cn('text-xl font-semibold', className)} {...props} />;
|
|
}
|