service-website/src/components/PdfReport.js

   1 import React from "react";
   2 import PropTypes from "prop-types";
   3 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
   4 import {faFilePdf} from '@fortawesome/free-solid-svg-icons';
   5
   6 const PdfReport = ({pdfLink, loading}) => {
   7     if (pdfLink) {
   8         return (
   9             <div id="pdfDownloadContainer" className="file has-name is-boxed">
  10                 <a className="file-label" href={pdfLink} target="_blank" rel="noopener noreferrer">
  11                     <span className="file-cta">
  12                         <span className="file-icon has-text-link has-text-danger" id="pdfDownloadIcon" >
  13                                 <FontAwesomeIcon icon={faFilePdf} size="3x"/>
  14                         </span>
  15                         <span className="file-label">
  16                             Click to download
  17                         </span>
  18                     </span>
  19                     <span className="file-name">
  20                         Report created successfully
  21                     </span>
  22                 </a>
  23             </div>
  24         );
  25     } else if (loading){
  26         return (
  27             <div id="pdfDownloadContainer">
  28                 <div className="spinner is-pulled-left">
  29                     <div className="rect1 has-background-info"></div>
  30                     <div className="rect2 has-background-info"></div>
  31                     <div className="rect3 has-background-info"></div>
  32                     <div className="rect4 has-background-info"></div>
  33                     <div className="rect5 has-background-info"></div>
  34                 </div>
  35             </div>
  36         );
  37     } else {
  38         return null;
  39     }
  40 };
  41
  42 PdfReport.propTypes = {
  43     pdfLink: PropTypes.string,
  44 };
  45
  46 export default PdfReport;