done

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "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"
   },

src/App.css

@@ -1,38 +1,152 @@
-.App {
-  text-align: center;
+/* Reset some default browser styles */
+body, html, h1, h2, h3, p, ul, li {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: Arial, sans-serif;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+/* Overall page styles */
+body {
+  background-color: #f4f4f4;
+  color: #333;
+  padding: 20px;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+/* Style for the Header */
+.header {
+  background-color: #00aaff;
+  padding: 10px 20px;
+  text-align: center;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.header a {
+  color: #fff;
+  text-decoration: none;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+/* Home Page Styles */
+.home {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
+  gap: 20px;
+  margin-top: 30px;
+}
+
+.home a {
+  text-align: center;
+  text-decoration: none;
+  color: #333;
+}
+
+.home img {
+  width: 100%;
+  max-width: 300px;
+  border-radius: 10px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.home h2 {
+  font-size: 20px;
+  margin-top: 10px;
+}
+
+/* Beers List Styles */
+.beers-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.beers-list div {
+  background-color: #fff;
+  padding: 10px;
+  border-radius: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.beers-list img {
+  height: 150px;
+  object-fit: contain;
+}
+
+.beers-list h3 {
+  font-size: 18px;
+  margin-top: 10px;
+}
+
+/* Beer Detail Page Styles */
+.beer-detail {
+  background-color: #fff;
+  padding: 20px;
+  margin: 20px auto;
+  max-width: 600px;
+  border-radius: 10px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.beer-detail img {
+  height: 250px;
+  margin-bottom: 20px;
+}
+
+.beer-detail h2 {
+  font-size: 28px;
+  margin-bottom: 10px;
+}
+
+.beer-detail p {
+  font-size: 16px;
+  line-height: 1.5;
+  margin-bottom: 10px;
+}
+
+/* New Beer Form Styles */
+form {
+  background-color: #fff;
+  padding: 20px;
+  margin: 20px auto;
+  max-width: 400px;
+  border-radius: 10px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+form input, form textarea {
+  width: 100%;
+  padding: 10px;
+  margin: 10px 0;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+form button {
+  width: 100%;
+  padding: 10px;
+  background-color: #00aaff;
   color: white;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+form button:hover {
+  background-color: #0077cc;
 }
 
-.App-link {
-  color: #61dafb;
+/* General Utility Classes */
+.text-center {
+  text-align: center;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.mt-20 {
+  margin-top: 20px;
 }

src/App.js

@@ -1,25 +1,32 @@
-import logo from './logo.svg';
-import './App.css';
+// src/App.js
+import React, { useState } from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import Home from './components/Home';
+import Beers from './components/Beers';
+import BeerDetail from './components/BeerDetail';
+import NewBeer from './components/NewBeer';
+import RandomBeer from './components/RandomBeer';
+import 'D:/Palak Jain/lab-react-FullStackDrinks/src/components/style.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>
-  );
-}
+const App = () => {
+  const [beers, setBeers] = useState([]);
+
+    const addBeer = (newBeer) => {
+        setBeers([...beers, newBeer]); // Update beers list
+    };
+    return (
+        <Router>
+            <div className="App">
+                <Routes>
+                    <Route path="/" element={<Home />} />
+                    <Route path="/beers" element={<Beers beers={beers}  />} />
+                    <Route path="/beers/:id" element={<BeerDetail beers={beers} />} />
+                    <Route path="/new-beer" element={<NewBeer addBeer={addBeer}/>} />
+                    <Route path="/random-beer" element={<RandomBeer beers={beers}/>} />
+                </Routes>
+            </div>
+        </Router>
+    );
+};
 
 export default App;

src/components/BeerDetail.js

@@ -0,0 +1,35 @@
+// src/components/BeerDetail.js
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import './style.css';
+
+const BeerDetail = () => {
+    const { id } = useParams();
+    const [beer, setBeer] = useState(null);
+
+    useEffect(() => {
+        const fetchBeerDetail = async () => {
+            const response = await fetch(`https://api.punkapi.com/v2/beers/${id}`);
+            const data = await response.json();
+            setBeer(data[0]);
+        };
+        fetchBeerDetail();
+    }, [id]);
+
+    return (
+        <div className="beer-detail">
+            {beer ? (
+                <>
+                    <h2>{beer.name}</h2>
+                    <img src={beer.image_url} alt={beer.name} />
+                    <p>{beer.description}</p>
+                    <p><strong>ABV:</strong> {beer.abv}%</p>
+                </>
+            ) : (
+                <p>Loading...</p>
+            )}
+        </div>
+    );
+};
+
+export default BeerDetail;

src/components/Beers.js

@@ -0,0 +1,21 @@
+// src/components/Beers.js
+import React from 'react';
+
+const Beers = ({ beers }) => {
+    return (
+        <div className="beers">
+            <h2>All Beers</h2>
+            <ul>
+                {beers.map((beer, index) => (
+                    <li key={index}>
+                        <img src={beer.image} alt={beer.name} />
+                        <h3>{beer.name}</h3>
+                        <p>{beer.description}</p>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+
+export default Beers;