From 82313bef46c2a015aedcf38bdc94b4608792a15e Mon Sep 17 00:00:00 2001
From: Ahmed Al-Taiar <ahmed.altaiar.06@gmail.com>
Date: Wed, 9 Oct 2024 20:32:39 -0400
Subject: [PATCH] Simplify PDF embed

---
 web/src/components/PDF/PDF.tsx                | 19 +++++++++++++++
 .../Portrait/PortraitForm/PortraitForm.tsx    |  2 +-
 web/src/components/Resume/Resume/Resume.tsx   | 21 +++--------------
 .../Resume/ResumeForm/ResumeForm.tsx          | 23 +++----------------
 .../Title/TitlesForm/TitlesForm.tsx           |  2 +-
 5 files changed, 27 insertions(+), 40 deletions(-)
 create mode 100644 web/src/components/PDF/PDF.tsx

diff --git a/web/src/components/PDF/PDF.tsx b/web/src/components/PDF/PDF.tsx
new file mode 100644
index 0000000..85e080a
--- /dev/null
+++ b/web/src/components/PDF/PDF.tsx
@@ -0,0 +1,19 @@
+interface PDFProps {
+  url: string
+  form?: boolean
+}
+
+const PDF = ({ url, form = false }: PDFProps) => (
+  <embed
+    src={url}
+    title="PDF"
+    type="application/pdf"
+    style={{
+      width: 'calc(100vw - 1rem)',
+      height: `calc(100vh - ${form ? '8.5rem' : '6rem'})`,
+    }}
+    className="rounded-xl"
+  />
+)
+
+export default PDF
diff --git a/web/src/components/Portrait/PortraitForm/PortraitForm.tsx b/web/src/components/Portrait/PortraitForm/PortraitForm.tsx
index 27b3b38..83d610f 100644
--- a/web/src/components/Portrait/PortraitForm/PortraitForm.tsx
+++ b/web/src/components/Portrait/PortraitForm/PortraitForm.tsx
@@ -102,7 +102,7 @@ const PortraitForm = ({ portrait }: PortraitFormProps) => {
     return (
       <div className="mx-auto w-fit space-y-2">
         <img
-          className="aspect-portrait max-w-2xl rounded-xl object-cover"
+          className="aspect-portrait max-w-80 sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl rounded-xl object-cover"
           src={portrait?.fileId}
           alt={`${process.env.FIRST_NAME} Portrait`}
         />
diff --git a/web/src/components/Resume/Resume/Resume.tsx b/web/src/components/Resume/Resume/Resume.tsx
index eb4f6a4..ffc6014 100644
--- a/web/src/components/Resume/Resume/Resume.tsx
+++ b/web/src/components/Resume/Resume/Resume.tsx
@@ -1,26 +1,11 @@
-import { useState } from 'react'
-
 import { Resume as ResumeType } from 'types/graphql'
 
+import PDF from 'src/components/PDF/PDF'
+
 interface ResumeProps {
   resume?: ResumeType
 }
 
-const Resume = ({ resume }: ResumeProps) => {
-  const [fileId] = useState<string>(resume?.fileId)
-
-  return (
-    <object
-      data={fileId}
-      type="application/pdf"
-      aria-label="Resume PDF"
-      style={{
-        width: 'calc(100vw - 1rem)',
-        height: 'calc(100vh - 6rem)',
-      }}
-      className="rounded-xl"
-    />
-  )
-}
+const Resume = ({ resume }: ResumeProps) => <PDF url={resume?.fileId} />
 
 export default Resume
diff --git a/web/src/components/Resume/ResumeForm/ResumeForm.tsx b/web/src/components/Resume/ResumeForm/ResumeForm.tsx
index 6962b0b..e2584fe 100644
--- a/web/src/components/Resume/ResumeForm/ResumeForm.tsx
+++ b/web/src/components/Resume/ResumeForm/ResumeForm.tsx
@@ -14,6 +14,7 @@ import type {
 import { TypedDocumentNode, useMutation } from '@redwoodjs/web'
 import { toast } from '@redwoodjs/web/toast'
 
+import PDF from 'src/components/PDF/PDF'
 import Uploader from 'src/components/Uploader/Uploader'
 import { deleteFile, handleBeforeUnload } from 'src/lib/tus'
 
@@ -100,16 +101,7 @@ const ResumeForm = ({ resume }: ResumeFormProps) => {
   if (resume?.fileId)
     return (
       <div className="mx-auto w-fit space-y-2">
-        <object
-          data={resume?.fileId}
-          type="application/pdf"
-          aria-label="Resume PDF"
-          style={{
-            width: 'calc(100vw - 1rem)',
-            height: 'calc(100vh - 10rem)',
-          }}
-          className="rounded-xl"
-        />
+        <PDF form url={resume?.fileId} />
         <div className="flex justify-center">
           <button
             type="button"
@@ -143,16 +135,7 @@ const ResumeForm = ({ resume }: ResumeFormProps) => {
             />
           </>
         ) : (
-          <object
-            data={fileId}
-            type="application/pdf"
-            aria-label="Resume PDF"
-            style={{
-              width: 'calc(100vw - 1rem)',
-              height: 'calc(100vh - 10rem)',
-            }}
-            className="rounded-xl"
-          />
+          <PDF form url={fileId} />
         )}
         {fileId && (
           <div className="flex justify-center space-x-2">
diff --git a/web/src/components/Title/TitlesForm/TitlesForm.tsx b/web/src/components/Title/TitlesForm/TitlesForm.tsx
index 0644740..46ff88a 100644
--- a/web/src/components/Title/TitlesForm/TitlesForm.tsx
+++ b/web/src/components/Title/TitlesForm/TitlesForm.tsx
@@ -97,7 +97,7 @@ const TitlesForm = ({ titles }: TitlesFormProps) => {
       <nav className="my-2 flex justify-center space-x-2">
         <button
           type="button"
-          className="btn btn-sm"
+          className="btn btn-sm uppercase"
           onClick={() => setPreview(!preview)}
         >
           {preview ? 'Hide' : 'Show'} Preview