More work on making modal look good

src/app/@modal/(.)paperless/document/[id]/modal.tsx

@@ -1,12 +1,12 @@
-'use client';
+"use client";
 
-import { type ElementRef, useEffect, useRef } from 'react';
-import { useRouter } from 'next/navigation';
-import { createPortal } from 'react-dom';
+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);
+  const dialogRef = useRef<ElementRef<"dialog">>(null);
 
   useEffect(() => {
     if (!dialogRef.current?.open) {
@@ -19,12 +19,14 @@ export function Modal({ children }: { children: React.ReactNode }) {
   }
 
   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')!
+    <dialog
+      ref={dialogRef}
+      className="absolute h-screen w-screen bg-black/90"
+      onClose={onDismiss}
+    >
+      {children}
+      {/* <button onClick={onDismiss} className="close-button" /> */}
+    </dialog>,
+    document.getElementById("modal-root")!,
   );
-}
+}

src/app/@modal/(.)paperless/document/[id]/page.tsx

@@ -1,5 +1,14 @@
 import DocumentViewer from "@/components/document-viewer";
+import { Modal } from "./modal";
 
-export default function FullPageDocumentPage({ params }: { params: { id: number } }) {
-  return <DocumentViewer id={params.id} />;
+export default function FullPageDocumentPage({
+  params,
+}: {
+  params: { id: number };
+}) {
+  return (
+    <Modal>
+      <DocumentViewer id={params.id} />
+    </Modal>
+  );
 }

src/app/page.tsx

@@ -16,7 +16,6 @@ export default function HomePage() {
           to get started.
         </div>
         <div>Or sign in to access the dashboard.</div>
-        <Link href="/paperless/document/12">Button</Link>
       </div>
     </main>
   );

src/app/paperless/document/[id]/page.tsx

@@ -1,6 +1,5 @@
 import DocumentViewer from "@/components/document-viewer";
 
-export default function FullPageDocumentPage({ params }: { params: { id: number } }) {
-  console.log("FULLL PAPGJPIGHEGPIUSHEGPIUWEGHPIWUEGH: " + params.id);
+export default function ModalDocumentPage({ params }: { params: { id: number } }) {
   return <DocumentViewer id={params.id} />;
 }

src/components/document-viewer.tsx

@@ -5,9 +5,10 @@ import { getUserData } from "@/app/actions";
 import LoadingSpinner from "@/components/loading-spinner";
 
 export default function DocumentViewer(props: { id: number }) {
-  const [pdfUrl, setPdfUrl] = useState<string | null>(null);
+  const [pdfUrl, setPdfUrl] = useState<string>(
+    "https://pdfobject.com/pdf/sample.pdf",
+  );
   const [loading, setLoading] = useState(true);
-  console.log("docuement viewer: " + props.id)
 
   useEffect(() => {
     const fetchData = async () => {
@@ -55,12 +56,19 @@ export default function DocumentViewer(props: { id: number }) {
   }
 
   return (
-    <embed
-      src={pdfUrl}
-      className="h-screen w-2/3"
-      type="application/pdf"
-      width="100%"
-      height="100%"
-    />
+    <div className="flex h-full w-screen min-w-0 justify-center text-white ">
+      <div className="flex-shrink flex-grow">
+        <embed
+          src={pdfUrl}
+          className=""
+          type="application/pdf"
+          width="100%"
+          height="100%"
+        />
+      </div>
+      <div className="flex h-full w-56 flex-shrink-0 flex-col border-l">
+        Hello
+        </div>
+    </div>
   );
 }

src/components/loading-spinner.tsx

@@ -1,12 +1,17 @@
+import { cn } from "@/lib/utils";
 import { LoaderCircle } from "lucide-react";
 
 interface LoadingSpinnerProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
 }
 
-export default function LoadingSpinner({ children }: LoadingSpinnerProps) {
+export default function LoadingSpinner({
+  children,
+  className,
+}: LoadingSpinnerProps) {
   return (
-    <div className="flex flex-row place-content-center gap-1">
+    <div className={cn("flex flex-row place-content-center gap-1", className)}>
       <LoaderCircle className="animate-spin" />
       {children}
     </div>

src/styles/globals.css

@@ -1,76 +1,80 @@
 @tailwind base;
-  @tailwind components;
-  @tailwind utilities;
+@tailwind components;
+@tailwind utilities;
 
-  @layer base {
-    :root {
-      --background: 0 0% 100%;
-      --foreground: 222.2 84% 4.9%;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
 
-      --card: 0 0% 100%;
-      --card-foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
 
-      --popover: 0 0% 100%;
-      --popover-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
 
-      --primary: 222.2 47.4% 11.2%;
-      --primary-foreground: 210 40% 98%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
 
-      --secondary: 210 40% 96.1%;
-      --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
 
-      --muted: 210 40% 96.1%;
-      --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
 
-      --accent: 210 40% 96.1%;
-      --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
 
-      --destructive: 0 84.2% 60.2%;
-      --destructive-foreground: 210 40% 98%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
 
-      --border: 214.3 31.8% 91.4%;
-      --input: 214.3 31.8% 91.4%;
-      --ring: 222.2 84% 4.9%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
 
-      --radius: 0.5rem;
-    }
+    --radius: 0.5rem;
+  }
 
-    .dark {
-      --background: 222.2 84% 4.9%;
-      --foreground: 210 40% 98%;
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
 
-      --card: 222.2 84% 4.9%;
-      --card-foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
 
-      --popover: 222.2 84% 4.9%;
-      --popover-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
 
-      --primary: 210 40% 98%;
-      --primary-foreground: 222.2 47.4% 11.2%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
 
-      --secondary: 217.2 32.6% 17.5%;
-      --secondary-foreground: 210 40% 98%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
 
-      --muted: 217.2 32.6% 17.5%;
-      --muted-foreground: 215 20.2% 65.1%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
 
-      --accent: 217.2 32.6% 17.5%;
-      --accent-foreground: 210 40% 98%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
 
-      --destructive: 0 62.8% 30.6%;
-      --destructive-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
 
-      --border: 217.2 32.6% 17.5%;
-      --input: 217.2 32.6% 17.5%;
-      --ring: 212.7 26.8% 83.9%;
-    }
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
   }
+}
 
-  @layer base {
-    * {
-      @apply border-border;
-    }
-    body {
-      @apply bg-background text-foreground;
-    }
-  }
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  dialog:modal {
+    max-width: 100vw;
+    max-height: 100vh;
+  }
+}