55 lines
1.1 KiB
TypeScript
55 lines
1.1 KiB
TypeScript
import { cn } from 'cn'
|
|
import { Icon } from './icon'
|
|
import { Button } from './ui/button'
|
|
import {
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogHeader,
|
|
Dialog as DialogRoot,
|
|
DialogTitle,
|
|
} from './ui/dialog'
|
|
|
|
export function Dialog({
|
|
title,
|
|
onClose,
|
|
children,
|
|
className,
|
|
}: {
|
|
title: string
|
|
className?: string
|
|
onClose: () => void
|
|
children: React.ReactNode
|
|
}) {
|
|
return (
|
|
<DialogRoot
|
|
open
|
|
onOpenChange={(open) => {
|
|
if (!open) onClose()
|
|
}}
|
|
>
|
|
<DialogContent
|
|
showCloseButton={false}
|
|
className={cn('max-h-[calc(100dvh-2rem)] overflow-y-auto', className)}
|
|
aria-describedby={undefined}
|
|
>
|
|
<DialogHeader>
|
|
<DialogTitle>{title}</DialogTitle>
|
|
</DialogHeader>
|
|
<DialogClose
|
|
render={
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
className="absolute right-2 top-2"
|
|
aria-label="Close"
|
|
/>
|
|
}
|
|
>
|
|
<Icon name="close" />
|
|
</DialogClose>
|
|
{children}
|
|
</DialogContent>
|
|
</DialogRoot>
|
|
)
|
|
}
|