DownloadImageButton

src/components/Buttons.tsx

@@ -72,6 +72,13 @@ const handleDownload = () => {
         console.error("Error fetching the file:", error);
     });
 };
+return (
+
+  <a type="button" onClick={handleDownload} className="download-butt">
+      Download
+  </a>
+
+);
 };
 
 export const DownloadImageButton = ({ url, fileName, children}: {url: string, fileName: string, children: React.ReactNode}) => {

src/contents/notebook.tsx

 
+import { DownloadImageButton } from "../components/Buttons";
 import H2 from "../components/Headings";
 import { useTabNavigation } from "../utils/TabNavigation";
 
@@ -8,27 +9,41 @@ export function Notebook() {
     <div>
       <H2 text="Lab journals and Protocol collection"/> 
       <div className='row'>
+        
         <div className="col">
+          <DownloadImageButton url="" fileName="">
             <img src="https://static.igem.wiki/teams/5247/lab-journals/titelseite-lab-book-1-proof-of-concept-pe.webp" style={{height: "75%", width: "auto"}}/>
+          </DownloadImageButton>
         </div>
+
         <div className="col">
+        <DownloadImageButton url="" fileName="">
             <img src="https://static.igem.wiki/teams/5247/lab-journals/titelseite-lab-book-2-engineering-pe.webp" style={{height: "75%", width: "auto"}}/>
+            </DownloadImageButton>
         </div>
       </div>
       <div className='row'>
         <div className="col">
+        <DownloadImageButton url="" fileName="">
             <img src="https://static.igem.wiki/teams/5247/lab-journals/titelseite-lab-book-3-primary-cell-culture.webp" style={{height: "75%", width: "auto"}}/>
+            </DownloadImageButton>
         </div>
         <div className="col">
+        <DownloadImageButton url="" fileName="">
             <img src="https://static.igem.wiki/teams/5247/lab-journals/titelseite-lab-book-4-lnp.webp" style={{height: "75%", width: "auto"}}/>
+            </DownloadImageButton>
         </div>
       </div>
       <div className='row'>
         <div className="col">
+        <DownloadImageButton url="" fileName="">
             <img src="https://static.igem.wiki/teams/5247/lab-journals/titelseite-lab-book-5-downstream.webp" style={{height: "75%", width: "auto"}}/>
+            </DownloadImageButton>
         </div>
         <div className="col">
+        <DownloadImageButton url="" fileName="">
             <img src="https://static.igem.wiki/teams/5247/lab-journals/titelseite-lab-book-sop.webp" style={{height: "75%", width: "auto"}}/>
+            </DownloadImageButton>
         </div>
       </div>
     </div>