Added level report

src/exams/pdf/index.tsx

@@ -1,64 +1,13 @@
 /* eslint-disable jsx-a11y/alt-text */
 import React from "react";
-import {
-  Document,
-  Page,
-  View,
-  Text,
-  StyleSheet,
-  Image,
-} from "@react-pdf/renderer";
+import { Document, Page, View, Text, Image } from "@react-pdf/renderer";
 import ProgressBar from "./progress.bar";
 // import RadialProgress from "./radial.progress";
 // import RadialProgressSvg from "./radial.progress.svg";
 import { Module } from "@/interfaces";
 import { ModuleScore } from "@/interfaces/module.scores";
 // import logo from './logo_title.png';
-
-const styles = StyleSheet.create({
-  body: {
-    paddingTop: 10,
-    paddingBottom: 20,
-    paddingHorizontal: 35,
-  },
-  titleView: {
-    display: "flex",
-    // flex: 1,
-    alignItems: "center",
-  },
-  title: {
-    textTransform: "uppercase",
-  },
-  textPadding: {
-    margin: "8px",
-  },
-  separator: {
-    width: "100%",
-    borderBottom: "1px solid #89b0c2",
-  },
-  textFont: {
-    fontFamily: "Helvetica",
-  },
-  textBold: {
-    fontFamily: "Helvetica-Bold",
-    fontWeight: "bold",
-  },
-  textColor: {
-    color: "#4e4969",
-  },
-  textUnderline: {
-    textDecoration: "underline",
-  },
-  spacedRow: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-  },
-  alignRightRow: {
-    display: "flex",
-    flexDirection: "row-reverse",
-  }
-});
+import { styles } from "./styles";
 
 interface Props {
   date: string;
@@ -70,6 +19,7 @@ interface Props {
   summary: string;
   logo: string;
   qrcode: string;
+  renderDetails: React.ReactNode;
 }
 
 const PDFReport = ({
@@ -82,6 +32,7 @@ const PDFReport = ({
   summary,
   logo,
   qrcode,
+  renderDetails,
 }: Props) => {
   const defaultTextStyle = [styles.textFont, { fontSize: 8 }];
   const defaultSkillsTextStyle = [styles.textFont, { fontSize: 8 }];
@@ -94,14 +45,8 @@ const PDFReport = ({
   return (
     <Document>
       <Page style={styles.body}>
-        <View
-          style={styles.alignRightRow}
-        >
-          <Image
-            src={logo}
-            fixed
-            style={{ height: "64px", width: "64px" }}
-          />
+        <View style={styles.alignRightRow}>
+          <Image src={logo} fixed style={{ height: "64px", width: "64px" }} />
         </View>
         <View style={styles.titleView}>
           <Text
@@ -129,7 +74,7 @@ const PDFReport = ({
           <Text style={defaultTextStyle}>Email: {email}</Text>
           <Text style={defaultTextStyle}>Gender: {gender}</Text>
         </View>
-        <View>
+        <View style={{ flex: 1}}>
           <Text
             style={[
               styles.textFont,
@@ -140,32 +85,7 @@ const PDFReport = ({
           >
             Test Details:
           </Text>
-          <View style={{ display: "flex", flexDirection: "row", gap: 30 }}>
-            {testDetails.map(({ module, score, total }) => (
-              <View
-                key="module"
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  gap: 8,
-                }}
-              >
-                <Text
-                  style={[
-                    styles.textFont,
-                    styles.textColor,
-                    styles.textBold,
-                    { fontSize: 10 },
-                  ]}
-                >
-                  {module}
-                </Text>
-                <Text>{score}</Text>
-                <Text>Out of {total}</Text>
-              </View>
-            ))}
-          </View>
+          <View>{renderDetails}</View>
         </View>
         <View>
           <Text
@@ -213,10 +133,13 @@ const PDFReport = ({
               ))}
           </View>
           <View style={styles.alignRightRow}>
-              <Image src={qrcode} style={{
-                width: '80px',
-                height: '80px',
-              }}/>
+            <Image
+              src={qrcode}
+              style={{
+                width: "80px",
+                height: "80px",
+              }}
+            />
           </View>
         </View>
         <View style={[{ paddingTop: 30 }, styles.separator]}>