feat: add download links for mobile view

Author: sidchigo

src/components/Template/template.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import Image from "next/image";
-import { BlobProvider } from "@react-pdf/renderer";
+import { PDFDownloadLink, PDFViewer } from "@react-pdf/renderer";
 
 import ProposalPDF from "../proposalPDF";
 
@@ -14,35 +14,45 @@ export default function Template({ isSubmitted, ...props }) {
 			</div>
 		);
 	}
-	console.log({ styles });
+
 	return (
 		<div className="w-full h-full p-4 flex flex-col gap-5 xl:flex-row bg-teal-950 rounded-lg shadow-sm">
-			<BlobProvider
-				document={<ProposalPDF template={styles} {...props} />}
+			<PDFViewer
+				className="w-full h-full border-0 hidden md:block"
+				height={"100%"}
 			>
-				{({ url, loading, error }) => {
-					if (loading) return <p>Loading PDF...</p>;
-					if (error) return <p>Error generating preview</p>;
-					return (
-						<iframe
-							src={url}
-							className="w-full h-full border-0 hidden md:block"
-							title="PDF Preview"
-						/>
-					);
-				}}
-			</BlobProvider>
+				<ProposalPDF template={styles} {...props} />
+			</PDFViewer>
 			<div className="xl:hidden text-center">Choose Templates</div>
-			<div className="flex flex-row justify-between xl:gap-5 xl:ml-4 xl:flex-col">
+			<div className="flex flex-col justify-between xl:gap-5 xl:ml-4 xl:flex-col">
 				<button
 					onClick={() => {
 						setStyles("elegant");
 					}}
 					className="cursor-pointer"
 				>
-					<div className="input border-teal-600 bg-teal-600 hover:bg-teal-700 text-white disabled:bg-teal-600 disabled:text-white xl:hidden">
-						Elegant
-					</div>
+					<PDFDownloadLink
+						document={<ProposalPDF template={styles} {...props} />}
+					>
+						<div className="input flex gap-2 justify-center items-center border-teal-600 bg-teal-600 hover:bg-teal-700 text-white disabled:bg-teal-600 disabled:text-white xl:hidden">
+							<div>Elegant</div>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								strokeWidth={1.5}
+								stroke="currentColor"
+								className="size-4"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
+								/>
+							</svg>
+						</div>
+					</PDFDownloadLink>
+
 					<Image
 						src={"/elegant.png"}
 						alt="elegant"
@@ -57,9 +67,28 @@ export default function Template({ isSubmitted, ...props }) {
 					}}
 					className="cursor-pointer"
 				>
-					<div className="input border-teal-600 bg-teal-600 hover:bg-teal-700 text-white disabled:bg-teal-600 disabled:text-white xl:hidden">
-						Modern
-					</div>
+					<PDFDownloadLink
+						document={<ProposalPDF template={styles} {...props} />}
+					>
+						<div className="input flex gap-2 justify-center items-center border-teal-600 bg-teal-600 hover:bg-teal-700 text-white disabled:bg-teal-600 disabled:text-white xl:hidden">
+							<div>Modern</div>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								strokeWidth={1.5}
+								stroke="currentColor"
+								className="size-4"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
+								/>
+							</svg>
+						</div>
+					</PDFDownloadLink>
+
 					<Image
 						src={"/modern.png"}
 						alt="modern"
@@ -74,9 +103,28 @@ export default function Template({ isSubmitted, ...props }) {
 					}}
 					className="cursor-pointer"
 				>
-					<div className="input border-teal-600 bg-teal-600 hover:bg-teal-700 text-white disabled:bg-teal-600 disabled:text-white xl:hidden">
-						Abstract
-					</div>
+					<PDFDownloadLink
+						document={<ProposalPDF template={styles} {...props} />}
+					>
+						<div className="input flex gap-2 justify-center items-center border-teal-600 bg-teal-600 hover:bg-teal-700 text-white disabled:bg-teal-600 disabled:text-white xl:hidden">
+							<div>Abstract</div>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								strokeWidth={1.5}
+								stroke="currentColor"
+								className="size-4"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
+								/>
+							</svg>
+						</div>
+					</PDFDownloadLink>
+
 					<Image
 						src={"/abstract.png"}
 						alt="abstract"

src/components/proposalPDF.jsx

@@ -56,7 +56,11 @@ const ProposalPDF = ({ template, ...props }) => {
 	const styles = templateMap[template];
 
 	return (
-		<Document pageMode="fullScreen" title={projectTitle ?? "Proposal"}>
+		<Document
+			pageMode="fullScreen"
+			title={`${projectTitle}_${template}` ?? "Proposal"}
+			subject={projectTitle}
+		>
 			<Page wrap size="A4" style={styles.page}>
 				{/* Header */}
 				<View style={styles.headerSection}>