You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.8 KiB
97 lines
2.8 KiB
import * as React from 'react'
|
|
import * as DialogPrimitive from '@radix-ui/react-dialog'
|
|
import { cn } from '@/lib/utils'
|
|
import { Ic } from '@/icons'
|
|
|
|
const Dialog = DialogPrimitive.Root
|
|
const DialogTrigger = DialogPrimitive.Trigger
|
|
const DialogClose = DialogPrimitive.Close
|
|
const DialogPortal = DialogPrimitive.Portal
|
|
|
|
function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
|
return (
|
|
<DialogPrimitive.Overlay
|
|
className={cn('fixed inset-0 z-50 bg-black/55 backdrop-blur-[3px]', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export interface DialogContentProps extends React.ComponentProps<typeof DialogPrimitive.Content> {
|
|
showCloseButton?: boolean
|
|
}
|
|
|
|
function DialogContent({
|
|
className,
|
|
children,
|
|
showCloseButton = true,
|
|
onPointerDownOutside,
|
|
onInteractOutside,
|
|
...props
|
|
}: DialogContentProps) {
|
|
return (
|
|
<DialogPortal>
|
|
<DialogOverlay />
|
|
<DialogPrimitive.Content
|
|
className={cn(
|
|
'fixed left-1/2 top-1/2 z-50 w-full max-w-[640px] -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-border-soft bg-card text-card-foreground shadow-[0_30px_80px_rgba(0,0,0,.35)] anim-pop outline-none flex flex-col',
|
|
className,
|
|
)}
|
|
onPointerDownOutside={(e) => {
|
|
// Prevent closing modal when clicking outside (backdrop)
|
|
e.preventDefault()
|
|
onPointerDownOutside?.(e)
|
|
}}
|
|
onInteractOutside={(e) => {
|
|
e.preventDefault()
|
|
onInteractOutside?.(e)
|
|
}}
|
|
{...props}
|
|
>
|
|
{children}
|
|
{showCloseButton && (
|
|
<DialogPrimitive.Close
|
|
aria-label="بستن"
|
|
className="absolute end-4 top-4 z-20 flex size-7 items-center justify-center rounded-xl text-grey-3 transition-colors hover:bg-muted/80 hover:text-foreground focus:outline-hidden disabled:pointer-events-none cursor-pointer"
|
|
>
|
|
<Ic name="x" className="size-4" />
|
|
<span className="sr-only">بستن</span>
|
|
</DialogPrimitive.Close>
|
|
)}
|
|
</DialogPrimitive.Content>
|
|
</DialogPortal>
|
|
)
|
|
}
|
|
|
|
const DialogTitle = DialogPrimitive.Title
|
|
const DialogDescription = DialogPrimitive.Description
|
|
|
|
function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return (
|
|
<div
|
|
className={cn('flex flex-col space-y-1.5 text-start pb-3 pe-8 border-b border-border-soft shrink-0', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return (
|
|
<div
|
|
className={cn('flex flex-col-reverse sm:flex-row items-center justify-end gap-2 pt-4 border-t border-border-soft shrink-0', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export {
|
|
Dialog,
|
|
DialogTrigger,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogFooter,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
}
|
|
|