const toggle = props.toggle ?? null; const content = props.content ?? <div className="p-5">Modal Content</div>; const open = props.open; const onOpenChange = props.onOpenChange; const ModalContent = styled.div` width: 400px; padding: 30px; border-radius: 20px; background: #090723; color: white; `; const Overlay = styled.div` background-color: var(--blackA9); position: fixed; z-index: 1000; inset: 0; display: flex; // Use flexbox justify-content: center; // Center children horizontally align-items: center; // Center children vertically animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1); `; const NoButton = styled.button` background: transparent; border: none; padding: 0; margin: 0; box-shadow: none; `; return ( <Dialog.Root open={open} onOpenChange={onOpenChange}> <Dialog.Trigger asChild> <NoButton>{toggle}</NoButton> </Dialog.Trigger> <Dialog.Overlay asChild> <Overlay> <Dialog.Content asChild> <ModalContent>{content}</ModalContent> </Dialog.Content> </Overlay> </Dialog.Overlay> </Dialog.Root> );