Some boostraps

src/App.js

@@ -1,8 +1,29 @@
-import postData from "./data/posts.json";
+
+import postData from "./data/posts";
+import Hero from "./Hero"
+import Nav from "./Nav.js"
 
 function App() {
   console.log(postData);
-  return <main></main>;
+
+  return <main>
+      <Nav />
+      <Hero />
+    <div className="App">
+
+  {
+    postData.map((post) => {
+      return (
+        <li className = 'card' key = {post.id}>
+          <span>{post.title}</span>             
+          <button>Go to Post</button>
+        </li>
+      )
+    })
+  }
+
+    </div>
+  </main>;
 }
 
 export default App;

src/Hero.js

@@ -0,0 +1,11 @@
+function Hero(){
+    return(
+        <div className="border-top border-bottom border-3">
+            <h2 className="py-5 text-center fs-1 script-font">
+                Travel is the only thing you buy that makes you richer...
+            </h2>
+        </div>
+    )
+}
+
+export default Hero;

src/Nav.js

@@ -0,0 +1,17 @@
+function Nav(){
+    return (
+        <nav className="container nav by-4">
+            <h1 className="me-5">
+                Travel <span className="script-font text-warning">Blog</span>
+            </h1>
+            <a className="link-secondary nav-link mt-2" href = '#'>
+                About
+            </a>
+            <a className="link-secondary nav-link mt-2" href = "#">
+                Popular posts
+            </a>
+        </nav>
+    )
+}
+
+export default Nav;

src/Tablerows.js

@@ -0,0 +1,26 @@
+function TableRows(posts){
+    const grouping = posts.reduce((acc,post)=>{
+        if(acc[post.location]){
+            acc[post.location]++;
+        } else {
+            acc[post.location] = 1;
+        }
+        return acc;
+    },
+    {});
+
+    const result = [];
+    for (let location in grouping){
+        result.push(
+            <tr key={location}>
+                <th scope = "row">{location}</th>
+                <td className="text-center">
+                    <span className="badge text-bg-secondary">{grouping[location]}</span>
+                </td>
+            </tr>
+        );
+    }
+    return result;
+}
+
+export default TableRows;

src/components/LocationCards.js

@@ -0,0 +1,24 @@
+// import { useState } from 'react'
+// import postData from 'src/data/posts.json'
+
+
+// export default function LocationCards () {
+//     const [postData, setpostData] = useState(postData)
+
+//     return (
+//         <div className="App">
+
+//       {
+//         postData.map((post) => {
+//           return (
+//             <li className = 'card' key = {post.id}>
+//               <span>{post.title}</span>             
+//               <button>Go to Post</button>
+//             </li>
+//           )
+//         })
+//       }
+
+//         </div>
+//     )
+// }