add document viewer

src/app/[locale]/watch-doc/layout.tsx

@@ -0,0 +1,9 @@
+import { PdfProvider } from '@/app/contexts/PdfContext';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+	return (
+		<PdfProvider>
+			{children}
+		</PdfProvider>
+	);
+}

src/app/[locale]/watch-doc/page.tsx

@@ -1,135 +1,90 @@
-'use server'
+'use server';
 
 import Link from 'next/link';
+import PdfViewer from '@/app/components/PdfViewer';
+import { DownloadButton } from '@/app/components/document-viewer/DownloadButton';
+import { CopyLinkButton } from '@/app/components/document-viewer/CopyLinkButton';
 
 interface PageProps {
-	searchParams: Promise<{ docid?: string }>;
+	searchParams: Promise<{ docid: string; title?: string }>;
 }
 
-export default async function Page({
-	searchParams
-}: PageProps) {
-	const { docid } = await searchParams;
+export default async function Page({ searchParams }: PageProps) {
+	const { docid, title } = await searchParams;
+
+	const documentTitle = title || 'FileName';
+	const ownerName = "Name Name Name";
+	const companyName = "companyName";
 
 	return (
-		<div
-			className="watch-doc-wrapper"
-		>
-			<div
-				className="watch-doc-page"
-			>
+		<div className="watch-doc-wrapper">
+			<div className="watch-doc-page">
 				<header className="watch-doc-header">
 					<Link href="#" className="header-logo">NoCopy</Link>
 					<Link href="#" className="header-user">Name</Link>
 				</header>
 
-				<div
-					className="watch-doc-status"
-				>
+				<div className="watch-doc-status">
 					<div className="st-title">Защита подтверждена</div>
-					<div className="st-sub">Документ <strong>Название документа</strong> зарегистрирован и защищён платформой NoCopy.</div>
+					<div className="st-sub">
+						Документ <strong>{documentTitle}</strong> зарегистрирован и защищён платформой NoCopy.
+					</div>
 				</div>
 
-				<div
-					className="watch-doc-grid"
-				>
+				<div className="watch-doc-grid">
 					<div>
-						<div
-							className="watch-doc-card"
-						>
-							<div
-								className="card-head"
-							>
-								Правообладатель
-							</div>
-
-							<div
-								className="card-body"
-							>
+						<div className="watch-doc-card">
+							<div className="card-head">Правообладатель</div>
+							<div className="card-body">
 								<div className="owner-row">
-									<div className="owner-av">N</div>
+									<div className="owner-av">Н</div>
 									<div>
-										<div className="owner-name">Сидоров Станислав Андреевич</div>
-										<div className="owner-meta">ООО "ПРОКОНТРОЛ"</div>
+										<div className="owner-name">{ownerName}</div>
+										{/* <div className="owner-meta">{companyName}</div> */}
 										<div className="owner-meta">Зарегистрирован в NoCopy</div>
 									</div>
 								</div>
 							</div>
 						</div>
 
-						<div
-							className="watch-doc-card"
-						>
-							<div
-								className="card-head"
-							>
-								Скачать документ
-							</div>
-
-							<div
-								className="card-body"
-							>
+						{/* 						<div className="watch-doc-card">
+							<div className="card-head">Скачать документ</div>
+							<div className="card-body">
+								<DownloadButton />
 								<div className="download-description">
-									Вы вошли как <strong>Сидоров Станислав Андреевич</strong>.
+									Вы вошли как <strong>{ownerName}</strong>.
 									<br />
 									Скачивание будет зарегистрировано.
 								</div>
-
-								<button className="btn btn-acc">
-									Скачать защищённый PDF
-								</button>
 							</div>
-						</div>
+						</div> */}
 
 						<div className="watch-doc-actions">
-							<button className="btn btn-out">
-								Скопировать ссылку
-							</button>
-							<Link href="#" className="btn btn-out" target="_blank">
-								О NoCopy
-							</Link>
+							<DownloadButton />
+							<CopyLinkButton />
+							<Link href="#" className="btn btn-out" target="_blank">О NoCopy</Link>
 						</div>
 					</div>
 
 					<div>
-						<div
-							className="watch-doc-card"
-						>
-							<div
-								className="card-head"
-							>
-								Предосмотр
-							</div>
-
-							<div
-								className="card-body"
-							>
-								<div
-									className="prev-wrap"
-								>
-									документ
-								</div>
-								<div className="document-controls">
-									<div className="document-controls__nav">
-										<button className="document-controls__prev">← Пред.</button>
-										<span className="document-controls__current-page">1 / 11</span>
-										<button className="document-controls__next">След. →</button>
-									</div>
-									<button className="document-controls__fullscreen">На весь экран</button>
-								</div>
+						<div className="watch-doc-card">
+							<div className="card-head">Предпросмотр</div>
+							<div className="card-body">
+								<PdfViewer
+									fileId={docid}
+									fileName={documentTitle}
+								/>
 							</div>
 						</div>
 					</div>
 				</div>
 
-				<div
-					className="watch-doc-footer"
-				>
-					<a href="#">NoCopy</a>
-					<a href="#">Условия</a>
-					<a href="#">Конфиденциальность</a>
+				<div className="watch-doc-footer">
+					<Link href="#">NoCopy</Link>
+					<Link href="#">Условия</Link>
+					<Link href="#">Конфиденциальность</Link>
 				</div>
 			</div>
 		</div>
-	)
+	);
 }