feat: replace usage of react-to-print with react-pdf

Author: kevin9foong

frontend/src/features/admin-form/responses/IndividualResponsePage/IndividualResponseNavbar.tsx

@@ -33,8 +33,8 @@ import { useUser } from '~features/user/queries'
 
 import { useUnlockedResponses } from '../ResponsesPage/storage/UnlockedResponses/UnlockedResponsesProvider'
 
-import PrintableResponse from './PrintableResponse'
 import { useIndividualSubmission } from './queries'
+import { ResponsePdfDownloadLink } from './utils/ResponsePdf'
 
 export const IndividualResponseNavbar = (): JSX.Element => {
   const { state } = useLocation()
@@ -190,7 +190,7 @@ export const IndividualResponseNavbar = (): JSX.Element => {
                   }}
                   variant="clear"
                 />
-                <PrintableResponse ref={printableResponseRef} />
+                <ResponsePdfDownloadLink />
               </Box>
             )}
           </Stack>

frontend/src/features/admin-form/responses/IndividualResponsePage/utils/ResponsePdf.tsx

@@ -0,0 +1,18 @@
+import { Document, Page, View, Text, PDFDownloadLink } from '@react-pdf/renderer'
+
+const ResponsePdf: React.FC = () => (
+  <Document>
+    <Page>
+      <View>
+        <Text>Response PDF Placeholder</Text>
+      </View>
+    </Page>
+  </Document>
+)
+
+export const ResponsePdfDownloadLink = () => (
+  <PDFDownloadLink document={<ResponsePdf />} fileName="response.pdf">
+    Download PDF
+  </PDFDownloadLink>
+)
+