Constancia
Este componente tiene la función de presentar una presentación de como quedaría la constancia en pdf, pero en una vista web.
Props
Los props que se le pasan a este componente vienen desde la página de constancia, a la que se accede al momento de poner la asistencia a un evento de una persona.
VistaWeb.tsx
import React from 'react'
 
const VistaWeb = ({data} : any) => {
 
    return (
        <div style={
            {
                display: 'flex',
                flexDirection: 'column',
                width: '60%',
                margin: '0 auto',
                fontFamily: 'Arial',
                backgroundColor: 'white',
            }
        }>
 
            <img src='/images/headerConstancia.jpg'></img>
 
            <p style={{
                textAlign: 'center',
            }}>Otorga la presente constancia a:</p>
 
            <h1 style={{
                textAlign: 'center',
            }}>{ data ? data[0] : '...' }</h1>
 
            <p style={{
                textAlign: 'center',
            }}>
                por asistir al evento:
            </p>
            <h1 style={{fontWeight: 'bold', textAlign:'center', textTransform: 'uppercase'}}>{ data ? data[1] : '...' }</h1>
 
            <p style={{
                textAlign: 'center',
            }}> {lorem} </p>
 
            <p style={{
                textAlign: 'center',
                textTransform: 'capitalize',
                fontWeight: 'bold',
            }}>{ data ? data[2] : '...' }</p>
 
            <p style={{textAlign: 'center', fontWeight:'bold', marginTop: '10rem'}}>{ secretario }</p>
            <p style={{textAlign: 'center', fontSize: '10px'}}>Secretario Politécnico "Ing. Jorge Matute Remus"</p>
 
 
            <img src='/images/footerConstancia.jpg' style={{
                justifySelf: 'end',
            }}></img>
        </div>
    )
}
 
export default VistaWebReferencias
Libreria React-pdf (opens in a new tab)
Video de ejemplo (opens in a new tab)
Last updated on January 10, 2023