wip: refresh design

apps/web/src/app/(dashboard)/documents/[id]/loadable-pdf-card.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { Suspense } from 'react';
+
+import dynamic from 'next/dynamic';
+
+import { Loader } from 'lucide-react';
+
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+import { PDFViewerProps } from '~/components/(dashboard)/pdf-viewer/pdf-viewer';
+
+export type LoadablePDFCard = PDFViewerProps & {
+  className?: string;
+  pdfClassName?: string;
+};
+
+const PDFCard = dynamic(async () => import('~/components/(dashboard)/pdf-viewer/pdf-viewer'), {
+  ssr: false,
+  loading: () => (
+    <div className="flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
+      <Loader className="h-12 w-12 animate-spin text-slate-500" />
+
+      <p className="mt-4 text-slate-500">Loading document...</p>
+    </div>
+  ),
+});
+
+export const LoadablePDFCard = ({ className, pdfClassName, ...props }: LoadablePDFCard) => {
+  return (
+    <Card className={className} gradient {...props}>
+      <CardContent className="p-2">
+        <PDFCard className={pdfClassName} {...props} />
+      </CardContent>
+    </Card>
+  );
+};

apps/web/src/app/(dashboard)/documents/[id]/page.tsx

@@ -0,0 +1,94 @@
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+
+import { ChevronLeft } from 'lucide-react';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { LoadablePDFCard } from './loadable-pdf-card';
+
+export type DocumentPageProps = {
+  params: {
+    id: string;
+  };
+};
+
+export default async function DocumentPage({ params }: DocumentPageProps) {
+  const { id } = params;
+
+  const documentId = Number(id);
+
+  if (!documentId || Number.isNaN(documentId)) {
+    redirect('/documents');
+  }
+
+  const session = await getRequiredServerComponentSession();
+
+  const document = await getDocumentById({
+    id: documentId,
+    userId: session.id,
+  }).catch(() => null);
+
+  if (!document) {
+    redirect('/documents');
+  }
+
+  return (
+    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
+      <Link href="/documents" className="flex items-center text-[#7AC455] hover:opacity-80">
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        Dashboard
+      </Link>
+
+      <h1
+        className="mt-4 max-w-xs truncate text-2xl font-semibold md:text-3xl"
+        title={document.title}
+      >
+        Document.pdf
+      </h1>
+
+      <div className="mt-8 grid w-full grid-cols-12 gap-x-8">
+        <LoadablePDFCard
+          className="col-span-7 rounded-xl before:rounded-xl"
+          document={document.document}
+        />
+
+        <div className="relative col-span-5">
+          <div className="sticky top-20 flex max-h-screen min-h-[calc(100vh-6rem)] flex-col rounded-xl border bg-[hsl(var(--widget))] px-4 py-6">
+            <h3 className="text-2xl font-semibold">Add Signers</h3>
+
+            <p className="mt-2 text-sm text-black/30">Add the people who will sign the document.</p>
+
+            <hr className="mb-8 mt-4" />
+
+            <div className="flex-1"></div>
+
+            <div className="">
+              <p className="text-sm text-black/30">Add Signers (1/3)</p>
+
+              <div className="relative mt-4 h-[2px] rounded-md bg-slate-300">
+                <div className="bg-primary absolute inset-y-0 left-0 w-1/3" />
+              </div>
+
+              <div className="mt-4 flex gap-x-4">
+                <Button
+                  className="flex-1 bg-black/5 hover:bg-black/10"
+                  size="lg"
+                  variant="secondary"
+                >
+                  Go Back
+                </Button>
+
+                <Button className="flex-1" size="lg">
+                  Continue
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}