feat: enhance Diploma component layout and styling; update course details display

diplomas/src/components/Diploma.jsx

@@ -8,84 +8,149 @@ import {
   Image,
 } from "@react-pdf/renderer";
 
+// Ajusta la ruta de tu logo si es necesario
+const LOGO_SRC = "/encabezado.png";
+
 const styles = StyleSheet.create({
-  page: { fontFamily: "Helvetica" },
+  page: {
-  title: { fontSize: 24, textAlign: "center", marginBottom: 20 },
+    fontFamily: "Helvetica",
-  nombre: {
+    padding: 0,
+    backgroundColor: "#fff",
+    position: "relative",
+  },
+  title: {
     fontSize: 18,
     textAlign: "center",
+    marginTop: 40,
     marginBottom: 10,
+    fontWeight: "normal",
+  },
+  constancia: {
+    fontSize: 20,
+    textAlign: "center",
+    letterSpacing: 4,
+    marginBottom: 18,
+    fontWeight: "normal",
+  },
+  label: {
+    fontSize: 13,
+    textAlign: "center",
+    marginBottom: 6,
+    fontWeight: "normal",
+  },
+  nombre: {
+    fontSize: 28,
+    textAlign: "center",
+    marginBottom: 16,
+    fontFamily: "Times-Roman",
     fontStyle: "italic",
   },
-  curso: {
+  participacion: {
-    fontSize: 30,
+    fontSize: 13,
     textAlign: "center",
-    marginBottom: 10,
+    marginBottom: 8,
-    fontWeight: "bold",
+    fontWeight: "normal",
   },
-  section: { padding: 40, fontSize: 14 },
+  curso: {
-  competencias: { marginLeft: 20, marginTop: 5 },
+    fontSize: 15,
-  competencia: { fontSize: 12, marginBottom: 2 },
+    textAlign: "center",
-  footer: {
+    fontWeight: "bold",
-    position: "absolute",
+    marginBottom: 6,
-    bottom: 20,
+  },
-    right: 40,
+  detalle: {
+    fontSize: 11,
+    textAlign: "center",
+    marginBottom: 30,
+    fontWeight: "normal",
+  },
+  nombreDirector: {
     fontSize: 10,
-    color: "#888",
+    textAlign: "center",
+    marginTop: 40,
+    marginBottom: 2,
+  },
+  director: {
+    fontSize: 10,
+    textAlign: "center",
+    marginBottom: 18,
+  },
+  footer: {
+    fontSize: 9,
+    textAlign: "center",
+    color: "#444",
+    position: "absolute",
+    bottom: 30,
+    left: 0,
+    right: 0,
   },
   qr: {
-    marginTop: 30,
-    alignSelf: "center",
     width: 100,
     height: 100,
+    alignSelf: "center",
+    marginTop: 30,
   },
 });
 
 export default function Diploma({ alumno, formacion, fecha, qr }) {
-  // formacion: { tipo, nombre, competencias }
+  // formacion: { tipo, nombre, horas, modalidad }
-  let tipoTexto = "formación";
+  // Puedes ajustar estos valores según tu modelo de datos
-  if (formacion?.tipo === "curso") tipoTexto = "curso";
+  const nombreCurso =
-  else if (formacion?.tipo === "inyeccion") tipoTexto = "inyección";
+    formacion?.nombre ||
-  else if (formacion?.tipo === "pildora") tipoTexto = "píldora educativa";
+    formacion?.curso?.nombre ||
+    formacion?.inyeccion?.nombre ||
+    formacion?.pildora?.nombre ||
+    "Sin curso";
+  const horas = formacion?.horas || 30;
+  const modalidad = formacion?.modalidad || "remota";
 
   return (
     <Document>
       <Page size="A4" style={styles.page}>
-        <Image src="/encabezado.png" />
+        {/* Logo */}
+        <Image src={LOGO_SRC} />
+
+        {/* Título */}
         <Text style={styles.title}>Otorga la presente</Text>
-        <Text style={styles.title}>CONSTANCIA</Text>
+        <Text style={styles.constancia}>CONSTANCIA</Text>
-        <Text style={styles.title}>a: </Text>
+        <Text style={styles.label}>a:</Text>
-        <Text style={styles.nombre}>{alumno?.nombre} </Text>
+
-        <Text style={styles.title}>
+        {/* Nombre del alumno */}
-          Por su asistencia{" "}
+        <Text style={styles.nombre}>{alumno?.nombre}</Text>
+
+        {/* Participación */}
+        <Text style={styles.participacion}>
+          Por su participación en el{" "}
           {formacion?.tipo === "curso"
-            ? "al curso"
+            ? "curso"
             : formacion?.tipo === "inyeccion"
-            ? "a la inyección"
+            ? "taller"
             : formacion?.tipo === "pildora"
-            ? "a la píldora educativa"
+            ? "píldora"
-            : "a la formación"}
+            : "programa"}
         </Text>
-        <Text style={styles.curso}>{formacion?.nombre || "Sin formación"}</Text>
+
-        {(formacion?.tipo === "curso" || formacion?.tipo === "inyeccion") &&
+        {/* Nombre del curso/formación */}
-          formacion?.competencias?.length > 0 && (
+        <Text style={styles.curso}>“{nombreCurso}”</Text>
-            <View style={styles.competencias}>
+
-              <Text style={{ fontWeight: "bold", marginBottom: 4 }}>
+        {/* Detalle de horas y modalidad */}
-                Competencias acreditadas:
+        <Text style={styles.detalle}>
-              </Text>
+          con duración de {horas} horas, modalidad {modalidad}.
-              {formacion.competencias.map((comp) => (
-                <Text key={comp.id} style={styles.competencia}>
-                  - {comp.descripcion}
-                </Text>
-              ))}
-            </View>
-          )}
-        <Text style={styles.title}>
-          Se expide en la ciudad de Xalapa, Ver., {fecha}
         </Text>
+
+        {/* Firma */}
+        <Text style={styles.nombreDirector}>
+          Dr. Juan Manuel Gutiérrez Méndez
+        </Text>
+        <Text style={styles.director}>Director de Proyectos</Text>
+
+        {/* QR */}
         {qr && <Image src={qr} style={styles.qr} />}
+
+        {/* Footer con fecha */}
         <Text style={styles.footer}>
-          Verifica este diploma en: http://localhost:3000/alumno/{alumno?.id}
+          Se expide en la ciudad de Xalapa, Ver., a los {fecha}
+          {"\n"}
+          {/*Verifica este diploma en: http://localhost:3000/alumno/{alumno?.id}*/}
         </Text>
       </Page>
     </Document>