updated Peoples and Books page

src/components/App.js

@@ -8,7 +8,7 @@ function App() {
             <Header/>
             <div className="flex">
                 <Sidebar/>
-                <div>
+                <div  className="flex1">
                     <Outlet/>
                 </div>
             </div>

src/components/Article.js

@@ -3,7 +3,7 @@ import { Link, useParams} from "react-router-dom";
 function Article() {
     const {slug} = useParams();
   return (
-    <>
+    <div className="margin">
       <Link to="/articles">
         <h4 style={{ marginBottom: "1rem" }}>
           <span role="img" aria-label="Finger Point">
@@ -15,7 +15,7 @@ function Article() {
       <h1>
         The slug of the article is::: <b>{slug}</b>!
       </h1>
-    </>
+    </div>
   );
 }
 

src/components/Articles.js

@@ -4,16 +4,17 @@ import ArticleList from "../data/articles";
 
 const Articles = () => {
   return (
-    <>
+    <div className="margin">
       {ArticleList.map((article, index) => (
         <div className="art" key={index}>
             <Link to={article.slug}>
                 <h3>{article.title}</h3>
             </Link>
             <h2>{article.author}</h2>
+            <br></br>
         </div>
       ))}
-    </>
+    </div>
   );
 };
 

src/components/Books.js

@@ -1,7 +1,48 @@
-const Books = ()=>{
-    return(
-        <h1>This is Books page</h1>
-    )
+import React from "react";
+import books from "../data/books.json";
+
+class Books extends React.Component {
+  state = {
+    searchTerm: ""
+  };
+  handleChange = ({ target: { value } }) => {
+    this.setState({ searchTerm: value });
+  };
+  render() {
+    let filteredBooks = books.filter((article) =>
+      article.title.toLowerCase().includes(this.state.searchTerm)
+    );
+    return (
+      <div className="page">
+        <input
+          placeholder="Search"
+          className="search"
+          value={this.state.searchTerm}
+          onChange={this.handleChange}
+        />
+        <ul className="archive">
+          {filteredBooks.map((book) => (
+            <Book {...book} />
+          ))}
+        </ul>
+      </div>
+    );
+  }
+}
+
+function Book(props) {
+  return (
+    <li className="book">
+      <img src={props.image} alt={props.title} />
+      <h2>{props.title}</h2>
+      <p>
+        Author:<span>{props.author}</span>
+      </p>
+      <a href={props.website}>
+        <button>Buy Now</button>
+      </a>
+    </li>
+  );
 }
 
-export default Books;
+export default Books;

src/components/Help.js

@@ -1,7 +1,5 @@
-const Help = ()=>{
-    return(
-      <h1>Nothing is here !</h1>
-    )
-  }
-
-  export default Help;
+function Help() {
+  return <h1>🤷‍♀️ How can we help you?</h1>;
+}
+
+export default Help;

src/components/Home.js

@@ -2,7 +2,7 @@ import { Link } from "react-router-dom";
 
 function Home() {
   return (
-    <>
+    <div className="margin">
       <h1>🚀 Welcome to Homepage!</h1>
       <ul className="people">
         {["articles", "books", "people"].map((path,index) => {
@@ -17,7 +17,7 @@ function Home() {
           );
         })}
       </ul>
-    </>
+    </div>
   );
 }
 

src/components/Peoples.js

@@ -1,7 +1,52 @@
-const Peoples = ()=>{
-  return(
-    <h1>This is people page</h1>
-  )
+import React from "react";
+
+import people from "../data/got.json";
+
+class People extends React.Component {
+  state = {
+    searchTerm: ""
+  };
+  handleChange = ({ target: { value } }) => {
+    this.setState({ searchTerm: value });
+  };
+  render() {
+    let allPeople = people.reduce((acc, cv) => {
+      acc = acc.concat(cv.people);
+      return acc;
+    }, []);
+
+    let filteredPeople = allPeople.filter((person) =>
+      person.name.toLowerCase().includes(this.state.searchTerm)
+    );
+    return (
+      <>
+        <input
+          placeholder="Search"
+          className="search"
+          value={this.state.searchTerm}
+          onChange={this.handleChange}
+        />
+        <ul className="people">
+          {filteredPeople.map((sp) => (
+            <SinglePerson {...sp} />
+          ))}
+        </ul>
+      </>
+    );
+  }
+}
+
+function SinglePerson(props) {
+  return (
+    <li className="card">
+      <div className="info">
+        <img src={props.image} alt={props.name} />
+        <h2>{props.name}</h2>
+      </div>
+      <p>{props.description}</p>
+      <a href={props.wikiLink}>Learn More!</a>
+    </li>
+  );
 }
 
-export default Peoples;
+export default People;