From d36bac5cb12cb8fd7d520bc35cac9ac156bc706d Mon Sep 17 00:00:00 2001
From: Erin Wolff <erin_wolff@outlook.com>
Date: Mon, 29 Jan 2024 15:53:27 -0800
Subject: [PATCH 1/4] updated imagePath

---
 src/App.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 0cd02c8..43d6589 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,7 +15,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);

From 0d26c76646a30d766d19440ff425e9e29feadeeb Mon Sep 17 00:00:00 2001
From: Erin Wolff <erin_wolff@outlook.com>
Date: Mon, 29 Jan 2024 15:54:10 -0800
Subject: [PATCH 2/4] created basic navbar component

---
 src/Navbar.js | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 src/Navbar.js

diff --git a/src/Navbar.js b/src/Navbar.js
new file mode 100644
index 0000000..157068f
--- /dev/null
+++ b/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>
+  )
+}
\ No newline at end of file

From dc0eccf094bef22b535fe17d0b9b8e499cd13cf8 Mon Sep 17 00:00:00 2001
From: Erin Wolff <erin_wolff@outlook.com>
Date: Mon, 29 Jan 2024 15:55:06 -0800
Subject: [PATCH 3/4] imported Navbar component to App.js

---
 src/App.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/App.js b/src/App.js
index 43d6589..a7ad099 100644
--- a/src/App.js
+++ b/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([]);
@@ -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

From ad96cb9feb353b5939e02b0364a45f08e7d294c8 Mon Sep 17 00:00:00 2001
From: Erin Wolff <erin_wolff@outlook.com>
Date: Mon, 29 Jan 2024 15:55:37 -0800
Subject: [PATCH 4/4] added basic styling for Navbar component

---
 src/App.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/App.css b/src/App.css
index 6b40cde..a4b1b26 100644
--- a/src/App.css
+++ b/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;
 }
\ No newline at end of file