From d646a6f258d3048260af8be714a0b7e8a4ee0844 Mon Sep 17 00:00:00 2001
From: trinigelos <trinidadgelos7@gmail.com>
Date: Wed, 23 Oct 2024 17:59:19 +0200
Subject: [PATCH] done

---
 package-lock.json             | 129 ++++++++++++++++++-
 package.json                  |   2 +
 public/index.html             |   3 +
 src/App.css                   | 225 +++++++++++++++++++++++++++++++---
 src/App.js                    |  40 +++---
 src/components/Header.jsx     |  36 ++++++
 src/components/HomePage.jsx   |  22 ++++
 src/components/beers.jsx      |  93 ++++++++++++++
 src/components/newBeer.jsx    |  79 ++++++++++++
 src/components/randomBeer.jsx |  40 ++++++
 src/components/singleBeer.jsx |  33 +++++
 11 files changed, 658 insertions(+), 44 deletions(-)
 create mode 100644 src/components/Header.jsx
 create mode 100644 src/components/HomePage.jsx
 create mode 100644 src/components/beers.jsx
 create mode 100644 src/components/newBeer.jsx
 create mode 100644 src/components/randomBeer.jsx
 create mode 100644 src/components/singleBeer.jsx

diff --git a/package-lock.json b/package-lock.json
index 3c65e57..adf834c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,8 +11,10 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.7.7",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.27.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       }
@@ -3085,6 +3087,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
+      "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4951,6 +4961,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -7907,9 +7940,9 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
       "funding": [
         {
           "type": "individual",
@@ -13669,6 +13702,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -13971,6 +14009,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
+      "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
+      "dependencies": {
+        "@remix-run/router": "1.20.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz",
+      "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
+      "dependencies": {
+        "@remix-run/router": "1.20.0",
+        "react-router": "6.27.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -18835,6 +18903,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "@remix-run/router": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
+      "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -20227,6 +20300,28 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
       "integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w=="
     },
+    "axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "requires": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+          "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -22414,9 +22509,9 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
     "follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ=="
     },
     "fork-ts-checker-webpack-plugin": {
       "version": "6.5.2",
@@ -26369,6 +26464,11 @@
         }
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -26585,6 +26685,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
+      "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
+      "requires": {
+        "@remix-run/router": "1.20.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz",
+      "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
+      "requires": {
+        "@remix-run/router": "1.20.0",
+        "react-router": "6.27.0"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/package.json b/package.json
index 022d9bf..c5082c5 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.27.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
diff --git a/public/index.html b/public/index.html
index aa069f2..b2ff0b8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,6 +9,9 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/src/App.css b/src/App.css
index 74b5e05..22b79e4 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,223 @@
 .App {
   text-align: center;
+    font-family: "Bebas Neue", serif;
+    font-weight: 400;
+    font-style: normal;
+  
+  
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
   display: flex;
-  flex-direction: column;
+  padding: 10px;
+  
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
+}
+
+.App-header a{
+  padding: 10px;
+
+}
+
+.div-app-header:hover{
+  background-color: #a3a4a59c;
+}
+
+
+
+/* General styles */
+body {
+  font-family: Arial, sans-serif;
+
+  margin: 0;
+  padding: 0;
+}
+
+
+input, textarea, button {
+  font-family: inherit;
+  font-size: 1rem;
+}
+
+a {
+  text-decoration: none;
+  color: white;
+
+}
+
+.home{
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  background-size: cover; 
+  background-position: center center; 
+  background-repeat: no-repeat; 
+  background-attachment: fixed; 
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-image: url("https://imgs.search.brave.com/VxQsriKa4TadrN3Tt_HZ6peaaYqqdiAJSglbwggMgcs/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly90NC5m/dGNkbi5uZXQvanBn/LzAyLzkzLzU1Lzg3/LzM2MF9GXzI5MzU1/ODcxN18zSUczY3RQ/enZTVzZtOUxsWHBt/T2hidkFicDZ6Q2Za/Ni5qcGc");
+}
+.home>h1{
+  margin: 0;
+  padding: 0;
+  font-size: 7rem;
+  margin-top: 6rem;
+}
+.links{
+  display: flex;
+}
+.links-link {
+  background-color: rgb(111, 119, 96);
+  padding: 10px;
+  margin: 10px;
+    color: white;
+}
+
+.links-link:hover{
+  background-color: rgb(131, 142, 104);
+color: rgb(255, 255, 255);
+}
+
+/* search input */
+.input-beers-search{
+margin: 30px;
+}
+
+/* Beer List */
+.beer-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 20px;
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+
+.beer {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  text-align: center;
+  
+}
+}
+
+.beer img {
+  max-height: 100px;
+  object-fit: contain;
+}
+
+.beer h3 {
+  margin: 15px 0 10px;
+  font-size: 1.2rem;
+  color: #333;
+}
+
+.beer p {
+  margin: 0;
+  font-size: 0.9rem;
+
+  color: #666;
+}
+
+.pagination-controls>*{
+  margin: 0.5rem;
+}
+
+/* Search input */
+input[type="text"] {
+  padding: 10px;
+  font-size: 1rem;
+  width: 100%;
+  max-width: 400px;
+  margin-bottom: 20px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+/* Button */
+button {
   color: white;
+  border: none;
+  padding: 10px;
+  font-size: 1rem;
+    background-color: #282c34;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  margin: 10px 0;
+}
+
+button:hover {
+  background-color: #282c34d8;
 }
 
-.App-link {
-  color: #61dafb;
+/* Add Beer Form */
+form {
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+  max-width: 600px;
+  margin: 2rem auto;
+  text-align: left;
+  box-shadow: 1px 1px 2px 3px rgba(0, 0, 0, 0.1);
+}
+.new-beer-h1{
+  margin-top: 2rem;
+}
+
+form label {
+  display: block;
+  font-size: 1rem;
+  margin: 15px 0 5px;
+  color: #333;
+}
+
+form input[type="text"],
+form textarea,
+form input[type="number"] {
+  min-width: 35rem;
+  padding: 10px;
+  font-size: 1rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+
+
+form button {
+  margin-top: 20px;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+/* Loading and error messages */
+p {
+  color: #666;
+  text-align: center;
 }
+
+/* single beer */
+.single-beer{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 3rem;
+  text-align: left;
+
+}
+.single-beer img, .random-beer-img {
+  height: 300px;
+  /* object-fit: contain; */
+  padding: 20px;
+}
+.single-beer-text>*{
+  max-width: 30rem;
+  text-align: left;
+
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 3784575..d29817e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,24 +1,28 @@
-import logo from './logo.svg';
-import './App.css';
+// src/App.js
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import Home from './components/HomePage';
+import Beers from './components/beers'; 
+import RandomBeer from './components/randomBeer'; 
+import NewBeer from './components/newBeer'; 
+import Header from './components/Header'; 
+import SingleBeer from './components/singleBeer';
+import "./App.css"
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Router>
+      <div className="App">
+        <Header />
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/beers" element={<Beers />} />
+          <Route path="/random-beer" element={<RandomBeer />} />
+          <Route path="/beer/:id" element={<SingleBeer />} />
+          <Route path="/new-beer" element={<NewBeer />} />
+        </Routes>
+      </div>
+    </Router>
   );
 }
 
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
new file mode 100644
index 0000000..3cb443e
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,36 @@
+// src/components/Header.js
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+const Header = () => {
+  const location = useLocation();
+
+  // Don't show the header on the Home page
+  if (location.pathname === '/') return null;
+
+  return (
+    <header className='App-header'>
+
+      <div className="div-app-header">
+      <Link to="/">Home</Link>
+
+      </div>
+      <div className="div-app-header">
+      <Link to="/beers">    ALL BEERS</Link>
+
+      </div>
+      <div className="div-app-header">
+      <Link to="/new-beer">    NEW BEER</Link>
+
+      </div>
+      <div className="div-app-header">
+      <Link to="/random-beer">    RANDOM BEER</Link>
+
+      </div>
+     
+      
+    </header>
+  );
+};
+
+export default Header;
diff --git a/src/components/HomePage.jsx b/src/components/HomePage.jsx
new file mode 100644
index 0000000..f9759cb
--- /dev/null
+++ b/src/components/HomePage.jsx
@@ -0,0 +1,22 @@
+// src/components/HomePage.js
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const HomePage = () => {
+  return (
+    <div className="home">
+      <h1>WELCOME TO OUR BEERS CATALOG</h1>
+      <div className="links">
+      <div className="links-link">
+        <Link to="/beers">All Beers</Link>
+      </div><div className="links-link">
+        <Link to="/random-beer">Random Beer</Link>
+        </div><div className="links-link">
+        <Link to="/new-beer">New Beer</Link>
+         </div>
+      </div>
+    </div>
+  );
+};
+
+export default HomePage;
diff --git a/src/components/beers.jsx b/src/components/beers.jsx
new file mode 100644
index 0000000..5339c92
--- /dev/null
+++ b/src/components/beers.jsx
@@ -0,0 +1,93 @@
+// src/components/BeerList.js
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+
+const Beers = () => {
+  const [beers, setBeers] = useState([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [currentPage, setCurrentPage] = useState(1);
+  const beersPerPage = 12;
+
+  useEffect(() => {
+    const fetchBeers = async () => {
+      try {
+        const response = await axios.get('https://ih-beers-api2.herokuapp.com/beers');
+        setBeers(response.data);
+        setLoading(false);
+      } catch (error) {
+        console.error('Error fetching beers:', error);
+      }
+    };
+
+    fetchBeers();
+  }, []);
+
+  const handleSearch = (event) => {
+    setSearchQuery(event.target.value);
+    setCurrentPage(1);  // Reset to first page on new search
+  };
+
+  const filteredBeers = beers.filter(beer =>
+    beer.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  // Pagination logic
+  const indexOfLastBeer = currentPage * beersPerPage;
+  const indexOfFirstBeer = indexOfLastBeer - beersPerPage;
+  const currentBeers = filteredBeers.slice(indexOfFirstBeer, indexOfLastBeer);
+  const totalPages = Math.ceil(filteredBeers.length / beersPerPage);
+
+  const goToNextPage = () => {
+    setCurrentPage(prevPage => Math.min(prevPage + 1, totalPages));
+  };
+
+  const goToPreviousPage = () => {
+    setCurrentPage(prevPage => Math.max(prevPage - 1, 1));
+  };
+
+  if (loading) return <p>Loading...</p>;
+
+  return (
+    <div>
+    
+      <input
+        className='input-beers-search'
+        type="text"
+        placeholder="Search beers by name..."
+        value={searchQuery}
+        onChange={handleSearch}
+        style={{ marginBottom: '20px' }}
+      />
+      <div className="beer-list">
+      {currentBeers.length > 0 ? (
+        currentBeers.map((beer) => (
+          <div key={beer._id} className="beer">
+            <img src={beer.image_url} alt={beer.name} style={{ height: '100px' }} />
+            <h3>{beer.name}</h3>
+            <p>{beer.tagline}</p>
+            <p><strong>First Brewed:</strong> {beer.first_brewed}</p>
+            <p><strong>Contributed By:</strong> {beer.contributed_by}</p>
+            <Link to={`/beer/${beer._id}`} state={{ beer }}>
+            <button className='btn-details'>More Details</button>
+          </Link>
+          </div>
+        ))
+      ) : (
+        <p>No beers match your search criteria.</p>
+      )}
+      
+      </div>
+      
+      {/* Pagination Controls */}
+      <div className="pagination-controls">
+        <button onClick={goToPreviousPage} disabled={currentPage === 1}>Previous</button>
+        <span>Page {currentPage} of {totalPages}</span>
+        <button onClick={goToNextPage} disabled={currentPage === totalPages}>Next</button>
+      </div>
+    </div>
+  );
+};
+
+export default Beers;
diff --git a/src/components/newBeer.jsx b/src/components/newBeer.jsx
new file mode 100644
index 0000000..0b56d11
--- /dev/null
+++ b/src/components/newBeer.jsx
@@ -0,0 +1,79 @@
+
+// src/components/AddBeer.js
+import React, { useState } from 'react';
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+
+const NewBeer = () => {
+  const [name, setName] = useState('');
+  const [tagline, setTagline] = useState('');
+  const [description, setDescription] = useState('');
+  const [firstBrewed, setFirstBrewed] = useState('');
+  const [attenuationLevel, setAttenuationLevel] = useState(0);
+  const [brewersTips, setBrewersTips] = useState('');
+  const [imageUrl, setImageUrl] = useState('');
+  
+  const navigate = useNavigate();
+
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const newBeer = {
+      name,
+      tagline,
+      description,
+      first_brewed: firstBrewed,
+      attenuation_level: attenuationLevel,
+      brewers_tips: brewersTips,
+      image_url: imageUrl,
+    };
+
+    try {
+   // Post the new beer
+   const postResponse = await axios.post('https://ih-beers-api2.herokuapp.com/beers/new', newBeer);
+   console.log(postResponse.data.message); // Logs success message
+   
+   // Now fetch the newly created beer by ID
+   const getResponse = await axios.get(`https://ih-beers-api2.herokuapp.com/beers`);
+   const addedBeer = getResponse.data.reverse().find((beer) => beer.name === newBeer.name);  // Find the newly added beer
+
+   // Redirect to the new beer's details page
+   navigate(`/beer/${addedBeer._id}`, { state: { beer: addedBeer } });
+
+    } catch (error) {
+      console.error('Error adding new beer:', error);
+    }
+  };
+
+  return (
+    <div>
+      <h1 className='new-beer-h1'>Add New Beer</h1>
+      <form id='new-beer-form' onSubmit={handleSubmit}>
+        <label>Name:</label>
+        <input type="text" value={name} onChange={(e) => setName(e.target.value)} required />
+
+        <label>Tagline:</label>
+        <input type="text" value={tagline} onChange={(e) => setTagline(e.target.value)} required />
+
+        <label>Description:</label>
+        <textarea value={description} onChange={(e) => setDescription(e.target.value)} required />
+
+        <label>First Brewed:</label>
+        <input type="text" value={firstBrewed} onChange={(e) => setFirstBrewed(e.target.value)} required />
+
+        <label>Attenuation Level:</label>
+        <input type="number" value={attenuationLevel} onChange={(e) => setAttenuationLevel(e.target.value)} required />
+
+        <label>Brewer's Tips:</label>
+        <input type="text" value={brewersTips} onChange={(e) => setBrewersTips(e.target.value)} required />
+
+        <label>Image URL:</label>
+        <input type="text" value={imageUrl} onChange={(e) => setImageUrl(e.target.value)} required />
+
+        <button type="submit">Add Beer</button>
+      </form>
+    </div>
+  );
+};
+
+export default NewBeer;
diff --git a/src/components/randomBeer.jsx b/src/components/randomBeer.jsx
new file mode 100644
index 0000000..f7ba836
--- /dev/null
+++ b/src/components/randomBeer.jsx
@@ -0,0 +1,40 @@
+// src/components/RandomBeer.js
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const RandomBeer = () => {
+  const [beer, setBeer] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchRandomBeer = async () => {
+      try {
+        const response = await axios.get('https://ih-beers-api2.herokuapp.com/beers/random');
+        setBeer(response.data);
+        setLoading(false);
+      } catch (error) {
+        console.error('Error fetching random beer:', error);
+      }
+    };
+
+    fetchRandomBeer();
+  }, []);
+
+  if (loading) return <p>Loading...</p>;
+
+  return (
+    <div className='single-beer'>
+      <img className='random-beer-img' src={beer.image_url} alt={beer.name}  />
+      <div className="single-beer-text">
+      <h1>{beer.name}</h1>
+      <p><strong>Tagline:</strong> {beer.tagline}</p>
+      <p><strong>First Brewed:</strong> {beer.first_brewed}</p>
+      <p><strong>Attenuation Level:</strong> {beer.attenuation_level}</p>
+      <p><strong>Description:</strong> {beer.description}</p>
+      <p><strong>Contributed By:</strong> {beer.contributed_by}</p>
+      </div>
+      </div>
+  );
+};
+
+export default RandomBeer;
diff --git a/src/components/singleBeer.jsx b/src/components/singleBeer.jsx
new file mode 100644
index 0000000..c629aab
--- /dev/null
+++ b/src/components/singleBeer.jsx
@@ -0,0 +1,33 @@
+import { useLocation } from 'react-router-dom';
+
+const SingleBeer = () => {
+  const location = useLocation();
+  const beer = location.state?.beer || {}; // Safe destructuring in case location.state is null
+ 
+  if (!beer) {
+    return <div>No beer data found!</div>; // Fallback in case there's no beer data
+  } 
+
+  
+
+  
+ 
+
+  return (
+    <div className="single-beer">
+      <img src={beer.image_url} alt={beer.name} />
+      <div className="single-beer-text">
+
+      <h2>{beer.name}</h2>
+      <p>{beer.tagline}</p>
+      <p>{beer.description}</p>
+      <p><strong>First Brewed:</strong> {beer.first_brewed}</p>
+      <p><strong>Attenuation Level:</strong> {beer.attenuation_level}</p>
+      <p><strong>Contributed By:</strong> {beer.contributed_by}</p>
+      </div>
+   
+    </div>
+  );
+};
+
+export default SingleBeer;