a tool for shared writing and social publishing
leaflet.pub
1import * as Dialog from "@radix-ui/react-dialog";
2import React from "react";
3
4export const Modal = ({
5 className,
6 open,
7 onOpenChange,
8 asChild,
9 trigger,
10 title,
11 children,
12}: {
13 className?: string;
14 open?: boolean;
15 onOpenChange?: (open: boolean) => void;
16 asChild?: boolean;
17 trigger: React.ReactNode;
18 title?: React.ReactNode;
19 children: React.ReactNode;
20}) => {
21 return (
22 <Dialog.Root open={open} onOpenChange={onOpenChange}>
23 <Dialog.Trigger asChild={asChild}>{trigger}</Dialog.Trigger>
24 <Dialog.Portal>
25 <Dialog.Overlay className="fixed inset-0 bg-primary data-[state=open]:animate-overlayShow opacity-60" />
26 <Dialog.Content
27 className={`
28 z-20 fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
29 overflow-y-scroll no-scrollbar w-max max-w-screen h-fit max-h-screen p-3
30 `}
31 >
32 <div
33 className={`
34 opaque-container p-3
35 flex flex-col gap-1
36 ${className}`}
37 >
38 {title && (
39 <Dialog.Title>
40 <h3>{title}</h3>
41 </Dialog.Title>
42 )}
43 <Dialog.Description>{children}</Dialog.Description>
44 </div>
45 <Dialog.Close />
46 </Dialog.Content>
47 </Dialog.Portal>
48 </Dialog.Root>
49 );
50};