From f1ee4be958d11f04dc1b8fea707f3c79b99f932a Mon Sep 17 00:00:00 2001
From: Aamir Azad <aamirmazad@gmail.com>
Date: Tue, 25 Jun 2024 12:44:49 +0530
Subject: [PATCH] feat: paperless documents modal

---
 .../@modal/(.)/paperless-documents/modal.tsx  | 30 +++++++++++++++++++
 .../@modal/(.)/paperless-documents/page.tsx   |  9 ++++++
 src/app/@modal/default.tsx                    |  3 ++
 3 files changed, 42 insertions(+)
 create mode 100644 src/app/@modal/(.)/paperless-documents/modal.tsx
 create mode 100644 src/app/@modal/(.)/paperless-documents/page.tsx
 create mode 100644 src/app/@modal/default.tsx

diff --git a/src/app/@modal/(.)/paperless-documents/modal.tsx b/src/app/@modal/(.)/paperless-documents/modal.tsx
new file mode 100644
index 0000000..5176ebe
--- /dev/null
+++ b/src/app/@modal/(.)/paperless-documents/modal.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { type ElementRef, useEffect, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { createPortal } from 'react-dom';
+
+export function Modal({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const dialogRef = useRef<ElementRef<'dialog'>>(null);
+
+  useEffect(() => {
+    if (!dialogRef.current?.open) {
+      dialogRef.current?.showModal();
+    }
+  }, []);
+
+  function onDismiss() {
+    router.back();
+  }
+
+  return createPortal(
+    <div className="modal-backdrop">
+      <dialog ref={dialogRef} className="modal" onClose={onDismiss}>
+        {children}
+        <button onClick={onDismiss} className="close-button" />
+      </dialog>
+    </div>,
+    document.getElementById('modal-root')!
+  );
+}
\ No newline at end of file
diff --git a/src/app/@modal/(.)/paperless-documents/page.tsx b/src/app/@modal/(.)/paperless-documents/page.tsx
new file mode 100644
index 0000000..df8694c
--- /dev/null
+++ b/src/app/@modal/(.)/paperless-documents/page.tsx
@@ -0,0 +1,9 @@
+import { Modal } from './modal';
+
+export default function PhotoModal({
+    params: { id: photoId },
+  }: {
+    params: { id: string };
+  }) {
+    return <Modal>{photoId}</Modal>;
+  }
\ No newline at end of file
diff --git a/src/app/@modal/default.tsx b/src/app/@modal/default.tsx
new file mode 100644
index 0000000..7592cba
--- /dev/null
+++ b/src/app/@modal/default.tsx
@@ -0,0 +1,3 @@
+export default function Default() {
+    return null;
+  }
\ No newline at end of file