done

package.json

@@ -8,7 +8,9 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.1",
     "react-scripts": "5.0.1",
+    "switch": "^0.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,24 +1,29 @@
-import logo from './logo.svg';
+
+
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import './App.css';
+import Home from './components/Home';
+import Beers from './components/Beers'; 
+import RandomBeer from './components/random-beer'; 
+import NewBeer from './components/NewBeer'; 
+import Header from './components/Header';
 
 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 />
+        <Home/>
+
+        <Routes>
+          <Route path="/" exact component={Home} />
+          <Route path="/beers" component={Beers} />
+          <Route path="/random-beer" component={RandomBeer} />
+          <Route path="/new-beer" component={NewBeer} />
+        </Routes>
+      </div>
+    </Router>
   );
 }
 

src/Header.css

@@ -0,0 +1,21 @@
+nav{
+    padding:50px;
+    background-color: aqua;
+    border: 2px solid rgb(40, 45, 47);
+
+}
+
+link{
+    text-decoration: none;
+
+}
+
+.Home{
+    text-decoration:none;
+    display: flex;
+    justify-content: center;
+}
+.Home img{
+    width:50px;
+
+}

src/Home.css

@@ -0,0 +1,4 @@
+.Home-contents{
+    justify-content: center;
+    display:inline;
+}

src/components/Beers.js

@@ -0,0 +1,69 @@
+// src/components/Beers.js
+
+import React, { useState, useEffect } from 'react';
+
+function Beers() {
+  const [beers, setBeers] = useState([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchBeers = async () => {
+      try {
+        const response = await fetch(`https://ih-beers-api2.herokuapp.com/beers/search?q=${searchQuery}`);
+        if (response.ok) {
+          const data = await response.json();
+          setBeers(data);
+          setIsLoading(false);
+        } else {
+          console.error('Failed to fetch filtered beers');
+        }
+      } catch (error) {
+        console.error('Error fetching filtered beers:', error);
+      }
+    };
+
+    if (searchQuery) {
+      fetchBeers();
+    }
+
+    return () => {
+
+      setIsLoading(true);
+    };
+  }, [searchQuery]);
+
+  const handleChange = (e) => {
+    setSearchQuery(e.target.value);
+  };
+
+  return (
+    <div>
+      <h1>All Beers</h1>
+      <input type="text" value={searchQuery} onChange={handleChange} placeholder="Search beers..." />
+      {isLoading ? (
+        <div>Loading...</div>
+      ) : (
+        <div>
+          {beers.length === 0 ? (
+            <div>No beers found</div>
+          ) : (
+            <div>
+              {beers.map((beer) => (
+                <div key={beer._id}>
+                  <img src={beer.image_url} alt={beer.name} style={{ width: '100px' }} />
+                  <p>Name: {beer.name}</p>
+                  <p>Tagline: {beer.tagline}</p>
+                  <p>Contributed by: {beer.contributed_by}</p>
+                  <hr />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Beers;

src/components/Header.js

@@ -0,0 +1,24 @@
+// src/components/Header.js
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+import "../Header.css"
+
+function Header() {
+  return (
+    <header>
+      <nav>
+        <ul>
+          <Link to="/">
+              <div className='Home'>
+              <img src= {require ("../assets/home.png")} alt="home" />
+              </div>
+
+          </Link>
+          </ul>
+      </nav>
+    </header>
+  );
+}
+
+export default Header;

src/components/Home.js

@@ -0,0 +1,28 @@
+// src/components/Home.js
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+function Home() {
+  return (
+    <div className="Home-contents">
+      <h1>Welcome to RootBeers!</h1>
+      <div>
+        <Link to="./beers">
+            <img src={require("../assets/beers.png")} alt="beer.png"/>
+          <button>All Beers</button>
+        </Link>
+        <Link to="/random-beer">
+            <img src={require("../assets/random-beer.png")} alt="random"/>
+          <button>Random Beer</button>
+        </Link>
+        <Link to="/new-beer">
+            <img src={require("../assets/new-beer.png" )} alt="new"/>
+          <button>New Beer</button>
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default Home;