Certificate

Certificate.tsx

import { Page, Text, View, StyleSheet, Document, Font, Image } from "@react-pdf/renderer";
import { containsArabic } from "../utils/utils";

Font.register({
  family: "Noto Sans Arabic",
  src: "https://cdn.jsdelivr.net/npm/@expo-google-fonts/[email protected]/NotoSansArabic_400Regular.ttf",
});

Font.register({
  family: "Work Sans",
  src: "https://fonts.gstatic.com/s/worksans/v2/ElUAY9q6T0Ayx4zWzW63VKCWcynf_cDxXwCLxiixG1c.ttf",
});

const styles = StyleSheet.create({
  body: {
    width: "2000px",
    height: "1414px",
    direction: "rtl",
    backgroundColor: "#E4E4E4",
  },
  image: {
    position: "absolute",
    zIndex: -1,
    width: "100%",
    height: "100%",
    objectFit: "fill",
  },

  text: {
    position: "absolute",
    left: "0px",
    right: "0px",
    marginHorizontal: "auto",
    textAlign: "center",
    justifyContent: "center",
  },
});

function langImg(lang: "العربية" | "English" | "Français") {
  switch (lang) {
    case "العربية":
      return "AR";
    case "English":
      return "EN";
    case "Français":
      return "FR";
    default:
      return "AR";
  }
}

function CourseCertificate({ lang = "العربية", courseName = "", fullname = "" }: { lang: "العربية" | "English" | "Français"; courseName?: string; fullname?: string }) {
  return (
    <Document>
      <Page size="A4" orientation="landscape" style={styles.body}>
        <View>
          <Text
            style={{
              top: containsArabic(fullname) ? "210px" : "245px",
              ...styles.text,
              textAlign: "center",
              fontSize: 70,
              fontWeight: "bold",
              color: "#50264a",
              fontFamily: containsArabic(fullname) ? "Noto Sans Arabic" : "Work Sans",
            }}
          >
            {fullname}
          </Text>
          <Text
            style={{
              top: containsArabic(courseName) ? "405px" : "420px",
              ...styles.text,
              textAlign: "center",
              fontSize: 25,
              fontWeight: "bold",
              color: "#e74c3c",
              fontFamily: containsArabic(courseName) ? "Noto Sans Arabic" : "Work Sans",
            }}
          >
            {courseName}
          </Text>
        </View>
        <Image src={`/imgs/cert/${langImg(lang)}.png`} style={styles.image} />
      </Page>
    </Document>
  );
}

export default CourseCertificate;