Added custom stylesheet

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

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