completed nested dynamic routes exercise

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.21.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.css

@@ -7,6 +7,15 @@
   pointer-events: none;
 }
 
+.nav-links {
+  width: 40%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  list-style: none;
+}
+
+
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;
@@ -24,6 +33,7 @@
   color: white;
 }
 
+
 .App-link {
   color: #61dafb;
 }

src/App.js

@@ -1,25 +1,30 @@
-import logo from './logo.svg';
+import { BrowserRouter, Routes, Route, Link} from 'react-router-dom';
 import './App.css';
+import Blog from './components/Blog';
+import Nav from './components/Nav';
+
+
 
 function App() {
   return (
+    <BrowserRouter> 
     <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>
+    <Nav />
+
+    <Blog /> 
+    {/* <h1>Home Page</h1>  */}
     </div>
+</BrowserRouter>
   );
 }
 
+// const Home = () => {
+//   return (
+// <div> 
+// <h1>Home</h1>
+// </div>
+//   )
+//  }
+
 export default App;
+

src/components/Blog.jsx

@@ -0,0 +1,29 @@
+import { Routes, Route } from 'react-router-dom';
+import PostDetails from './PostDetails'; // Import PostDetail component
+import PostList from './PostList';
+
+function Blog() {
+
+  return (
+
+    <main className="blog-main">
+      <Routes>
+      {/* <Route path="/" element={Home} />  */}
+        <Route path="/blog" element={<PostList />} /> {/* Base route for post list */}
+        <Route path="/blog/:postId" element={<PostDetails />} /> {/* Dynamic route for post detail */}
+      </Routes>
+    </main>
+    // ...
+  );
+}
+
+const Home = () => {
+    return (
+  <div> 
+  <h1>Home</h1>
+  </div>
+    )
+   }
+
+
+  export default Blog;

src/components/Nav.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import '../App.css';
+import { Link } from "react-router-dom";
+import Blog from "./Blog";
+import './nav.css'
+
+function Nav () {
+    return (
+<nav> 
+
+{/* <li>Blog</li> */}
+<Link to={'/'}>Home Page</Link>
+<Link to={`/blog/`}>Blog</Link>
+
+{/* <div>
+     <Blog /> 
+</div> */}
+
+</nav>
+    )
+}
+
+export default Nav

src/components/PostDetails.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useParams, Link } from 'react-router-dom';
+import blogData from '../data/blog.json';
+
+function PostDetails() {
+  const { postId } = useParams();
+  const post = blogData.posts[postId];
+
+
+  return (
+    <div className="post-detail">
+      <h1>{post.title}</h1>
+      <p className="post-author">By {post.author} on {post.date}</p>
+      <div className="post-tags">
+        {post.tags.map((tag) =>  (
+          <span key={tag} style={{ color:"red"}}className="tag">Tag:{tag}  </span>
+        ))}
+      </div>
+
+      <div className="post-content">
+       <p style={{ textDecoration: "underline"}}> {post.content} </p>
+        </div>
+
+
+
+    </div>
+
+
+  );
+}
+
+export default PostDetails;

src/components/PostList.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import blogData from '../data/blog.json';
+
+function PostList() {
+//   const posts = Object.values(blogData.posts);
+const posts = blogData.posts;
+
+  return (
+    <React.Fragment> 
+    <h1>BLOG, BLOG, BLOG </h1>
+    <ul style={{ listStyle: 'none'}}>
+      {Object.keys(posts).map((post) => (
+        <li key={post}>
+          <Link to={`/blog/${post}`}>{posts[post].title}</Link>
+          <p>{posts[post].summary}</p>
+        </li>
+      ))}
+    </ul>
+    </React.Fragment>
+  );
+}
+
+export default PostList;

src/components/nav.css

@@ -0,0 +1,9 @@
+nav {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    min-height: 10vh;
+    /* list-style: none; */
+    background: royalblue;
+    color: white;
+  }