Criando botão com relatorio de doaçoes

Desktop.ini

@@ -0,0 +1,3 @@
+[.ShellClassInfo]
+IconFile=C:\Program Files\FolderPainter\Icons\Pack_01\12.ico
+IconIndex=0

package.json

@@ -14,6 +14,7 @@
     "react-burger-menu": "^2.7.1",
     "react-dom": "^16.13.1",
     "react-icons": "^3.10.0",
+    "react-lottie": "^1.2.3",
     "react-router-dom": "^5.2.0",
     "react-router-hash-link": "^2.0.0",
     "react-scripts": "3.4.1",

src/components/ButtonPdf/ButtonPDF.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+
+
+
+const ButtonPDF = (props) => {
+
+  return (
+
+      <ContainerButton>
+      { props.href ?
+        <A href={props.href} target="_blank" src="/src/images/Transparência-ÉPossívelSonhar.pdf">{props.title}</A> :
+        <StyledLink to={props.to}>{props.title}</StyledLink>
+      }
+    </ContainerButton>
+
+
+  )
+}
+
+export default ButtonPDF;
+
+const A = styled.a`
+color: #FFFFFF !important;
+text-decoration: none !important;
+`
+
+const StyledLink = styled(Link)`
+color: #FFFFFF !important;
+text-decoration: none !important;
+`
+
+const ContainerButton = styled.button`
+padding: 0.5em 1em;
+margin-left:1em;
+text-decoration: none;
+background: #d33b3f;
+color: #FFFFFF;
+border: 0;
+border-radius: 40px;
+width: 112px;
+height: 36px;
+&:hover {
+  background: #ff0040;
+}
+`

src/components/TopBar/TopBar.js

@@ -1,13 +1,17 @@
+/* eslint-disable no-undef */
 import React from "react";
 import styled from "styled-components";
 import TopButton from "../TopButton";
 import Logo from "../Logo";
 import Search from "../Search";
 import { Link, useLocation } from "react-router-dom";
+import ButtonPDF from'../ButtonPdf/ButtonPDF';
+import { useEffect } from "react";
 
 const TopBar = () => {
   const { pathname } = useLocation();
   const currentPath = pathname.substring(1);
+
 
   return (
     <Container>
@@ -44,7 +48,14 @@ const TopBar = () => {
       />
 
       <TopButton title="Doe" to="/como-ajudar"></TopButton>
+
+      <ButtonPDF title="Doações" href="Transparência-ÉPossívelSonhar.pdf" > </ButtonPDF>
+
+
+
+
     </Container>
+
   );
 };
 

src/router/index.js

@@ -8,6 +8,8 @@ import Attendance from "../Containers/Attendance";
 import Publications from "../Containers/Publications";
 import Radio from "../components/Radio";
 
+
+
 export const Router = () => {
   return (
     <Switch>
@@ -35,6 +37,7 @@ export const Router = () => {
       <Route exact path="/radio">
         <Radio />
       </Route>
+
     </Switch>
   );
 };