Added PNGs with partial radial progress

src/exams/pdf/details/radial.result.tsx

@@ -1,36 +1,50 @@
+/* eslint-disable jsx-a11y/alt-text */
 import React from "react";
 import {
-  Document,
-  Page,
   View,
   Text,
-  StyleSheet,
   Image,
 } from "@react-pdf/renderer";
 import { styles } from "../styles";
 import { ModuleScore } from "@/interfaces/module.scores";
 
-export const RadialResult = ({ module, score, total }: ModuleScore) => (
+export const RadialResult = ({ module, score, total, png }: ModuleScore) => (
   <View
     key="module"
-    style={{
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      gap: 8,
-    }}
+    style={[
+      styles.textFont,
+      {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 4,
+        position: "relative",
+      },
+    ]}
   >
-    <Text
-      style={[
-        styles.textFont,
-        styles.textColor,
-        styles.textBold,
-        { fontSize: 10 },
-      ]}
-    >
+    <Text style={[styles.textColor, styles.textBold, { fontSize: 10 }]}>
       {module}
     </Text>
-    <Text>{score}</Text>
-    <Text>Out of {total}</Text>
+    <Image src={png} style={{ height: "64px", width: "64px" }}></Image>
+    <View
+      style={[
+        styles.textColor,
+        {
+          display: "flex",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: 10,
+          gap: 8,
+        },
+      ]}
+    >
+      <Text style={styles.textBold}>{score}</Text>
+      <Text style={{ fontSize: 8 }}>out of {total}</Text>
+    </View>
   </View>
 );