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">Click to download</span>
  16                     </span>
  17                     <span className="file-name">Report created successfully</span>
  18                 </a>
  19             </div>
  20         );
  21     } else if (loading) {
  22         return (
  23             <div id="pdfDownloadContainer">
  24                 <div className="spinner is-pulled-left">
  25                     <div className="rect1 has-background-info"/>
  26                     <div className="rect2 has-background-info"/>
  27                     <div className="rect3 has-background-info"/>
  28                     <div className="rect4 has-background-info"/>
  29                     <div className="rect5 has-background-info"/>
  30                 </div>
  31             </div>
  32         );
  33     } else {
  34         return null;
  35     }
  36 };
  37
  38 PdfReport.propTypes = {
  39     pdfLink: PropTypes.string,
  40     loading: PropTypes.bool.isRequired,
  41 };
  42
  43 export default PdfReport;