Merge pull request #2 from erinwolff/navbar_branch

Navbar branch

src/App.css

@@ -76,4 +76,15 @@
   max-height: calc(90% - 1.2em);
   margin-top: 5px;  /* Adjust this if needed */
   animation-delay: 1.5s; /* Starts fading in after 1.5s */
+}
+
+.Navbar {
+  display: flex;
+  justify-content: center;
+}
+
+.navButton {
+  width: 10em;
+  height: 3em;
+  margin: 1em;
 }

src/App.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import './App.css';
+import Navbar from './Navbar';
 
 function App() {
   const [images, setImages] = useState([]);
@@ -15,7 +16,7 @@ function App() {
       let index = 1;
 
       while (mounted) {
-        const imagePath = `./assets/${index}.png`;
+        const imagePath = process.env.PUBLIC_URL + '/assets/' + `${index}` + '.png';
 
         try {
           const response = await fetch(imagePath);
@@ -79,6 +80,7 @@ function App() {
       ) : (
         <>
           <h1 className="comic-title">Checkmate Productions</h1>
+          <Navbar images={images} setCurrentImageIndex={setCurrentImageIndex} currentImageIndex={currentImageIndex}/>
           <div className="viewer-container">
             <h2 className="comic-subtitle" key={subtitle}>{subtitle}</h2>
             <img

src/Navbar.js

@@ -0,0 +1,21 @@
+export default function Navbar({setCurrentImageIndex, images, currentImageIndex}) {
+  const handlePreviousClick = () => {
+    if (currentImageIndex > 0) {
+      setCurrentImageIndex((prevIndex) => prevIndex - 1);
+    }
+  };
+
+  const handleNextClick = () => {
+    if (currentImageIndex < images.length - 1) {
+      setCurrentImageIndex((prevIndex) => prevIndex + 1);
+    }
+  };
+
+
+  return (
+    <div className="Navbar">
+      <button className="navButton" onClick={handlePreviousClick}>Previous</button>
+      <button className="navButton" onClick={handleNextClick}>Next</button>
+    </div>
+  )
+}