Fixed cert layout

code100x · May 27, 2024 · 00af23b · 00af23b
1 parent cc150d1
commit 00af23b
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 46 deletions.
diff --git a/src/components/Certificate.tsx b/src/components/Certificate.tsx
@@ -8,7 +8,7 @@ import {
   CardTitle,
 } from '@/components/ui/card';
 import { Button } from './ui/button';
-import { FaDownload, FaFileImage, FaLinkedin, FaTwitter } from 'react-icons/fa';
+import { FaFileImage, FaLinkedin, FaTwitter } from 'react-icons/fa';
 import { useGenerateCertificate } from '@/hooks/useCertGen';
 import { OneCertificate } from '@/utiles/certificate';
 import { useMemo } from 'react'; //used to fix maximum update depth exceeded err
@@ -34,15 +34,15 @@ export const CertificateComponent = ({
     userName,
   });
 
-  const handleDownloadPDF = async () => {
-    const downloadUrl = certificatePdfUrl;
-    const a = document.createElement('a');
-    a.href = downloadUrl!;
-    a.download = 'certificate.pdf';
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-  };
+  // const handleDownloadPDF = async () => {
+  //   const downloadUrl = certificatePdfUrl;
+  //   const a = document.createElement('a');
+  //   a.href = downloadUrl!;
+  //   a.download = 'certificate.pdf';
+  //   document.body.appendChild(a);
+  //   a.click();
+  //   document.body.removeChild(a);
+  // };
 
   const handleDownloadPNG = async () => {
     const downloadUrl = certificateImageUrl;
@@ -87,9 +87,9 @@ export const CertificateComponent = ({
         <CardDescription>{course.description}</CardDescription>
       </CardHeader>
       <CardFooter className="flex justify-end">
-        <Button onClick={() => handleDownloadPDF()} className="mr-2">
+        {/* <Button onClick={() => handleDownloadPDF()} className="mr-2">
           <FaDownload className="mr-1" /> Download PDF
-        </Button>
+        </Button> */}
         <Button onClick={() => handleDownloadPNG()} className="mr-2">
           <FaFileImage className="mr-1" /> Download PNG
         </Button>

diff --git a/src/components/CertificateVerify.tsx b/src/components/CertificateVerify.tsx
@@ -1,12 +1,6 @@
 'use client';
 
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Certificate, Course, User } from '@prisma/client';
 import { useGenerateCertificate } from '@/hooks/useCertGen';
 
@@ -25,33 +19,34 @@ export const CertificateVerify = ({
   });
 
   return (
-    <div className="h-screen flex justify-center flex-col pb-20 mx-10">
-      <h1 className="text-4xl text-center pb-4">100x Devs Certificate</h1>
-      <Card className="w-500 my-4 flex">
-        <CardContent className="flex-none mr-4 w-1/2">
-          {certificateImageUrl ? (
-            <img
-              src={certificateImageUrl}
-              alt="Generated Certificate"
-              className="w-full h-auto"
-            />
-          ) : (
-            'Loading...'
-          )}
-        </CardContent>
+    <div>
+      <h1 className="text-4xl text-center py-4">100x Devs Certificate</h1>
+      <div className="flex justify-center pb-20 mx-10">
+        <Card className="my-4">
+          <CardContent className="flex-none w-[90vw] max-w-[800px]">
+            {certificateImageUrl ? (
+              <img
+                src={certificateImageUrl}
+                alt="Generated Certificate"
+                className="w-full h-auto"
+              />
+            ) : (
+              <div className="min-h-[500px] flex justify-center items-center">
+                Loading...
+              </div>
+            )}
+          </CardContent>
 
-        <div className="flex-grow">
-          <CardHeader>
-            <CardTitle>
-              This Certificate was issued to {certificate.user.name} for
-              completing {certificate.course.title}
-            </CardTitle>
-            <CardDescription>
-              Course Description: {certificate.course.description}
-            </CardDescription>
-          </CardHeader>
-        </div>
-      </Card>
+          <div className="flex justify-center">
+            <CardHeader>
+              <CardTitle>
+                This Certificate was issued to {certificate.user.name} for
+                completing {certificate.course.title}
+              </CardTitle>
+            </CardHeader>
+          </div>
+        </Card>
+      </div>
     </div>
   );
 };
diff --git a/src/db/cert.ts b/src/db/cert.ts
@@ -10,7 +10,7 @@ export const getCertificates = async () => {
     return [];
   }
   const purchases = await getPurchases(session?.user.email || '');
-  const courses = purchases.filter((x) => x.certIssued === false);
+  const courses = purchases.filter((x) => x.certIssued === true);
 
   const courseWithCert: {
     course: Course;